引导 datetimepicker 无法禁用 onload

Question

我有一个bootstrap datetimepicker 和一个按钮：

当页面加载时，datetimepicker 应该被禁用。单击它应该启用的按钮：

我做了如下：

<div id="div_choose_date" style="display:block;margin-top:20px;">
                        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="padding:0px 0px 10px 0px">
                            <span class="small">Date</span>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepicker1'>
                                    <input type='text' class="form-control" id="pickdate"/>
                                    <span class="input-group-addon" id="showpicker">
                                        <span class="glyphicon glyphicon-calendar"></span>                                      
                                    </span>
                                </div>
                                <button type="button" id="btn_changedate" class="btn btn-success" style="width:100%;">Change</button>
                            </div>
                        </div>
                    </div>

为了禁用，我尝试如下：

    $(document).ready(function() {

$("#datetimepicker1").datetimepicker({
                pickTime: false,
                format : "YYYY/MM/DD",
                startDate: new Date()
                }); 

                $("#div_choose_date").prop('disabled', true);

                $("#btn_changedate").click(function(){

                 $("#div_choose_date").prop('disabled', false);

            });
    });

但不幸的是它不起作用！

如何禁用 datetimepicker onload 并在单击按钮时启用它？

Answer 1

根据您的代码，日期选择器甚至没有被启用。为此，您需要初始化插件，

$(function() {
    $('#pickdate').datetimepicker();    
});

如果你想禁用（即销毁），那么你可以这样做：

$('#someButton').click(function(e) {
    $('#pickdate').datetimepicker('remove')  // or $('#element').datepicker('destroy');
});

您可以在fiddle here 上查看它 - 首先启用它（单击 grn 按钮），然后单击另一个按钮。您会注意到日期不再弹出

有些人说将元素全部删除会更容易（因为在某些情况下，boostrap 没有使用destroy 方法）。但是，函数 datetimepicker('remove') 确实有效。因此，既然您说您的日期选择器实际上是在加载时启用，这没有任何意义，但 w/e，那么请继续使用 datetimepicker('remove')。