如何禁用Bootstrap DatePicker

Question

无法禁用DatePickerhere.我能够禁用输入字段,但按下后日历字形仍将打开选择器.

我已经尝试设置选择器的disabled和readonly属性,但这仅适用于输入字段.我无法禁用glyphicon来完全禁用控件.

问题:如何完全禁用控件？

这是我到目前为止所尝试的:

<div class="input-group input-append date" id="dateRangePicker">
 <input type="text" class="form-control" name="date" id="kalib_dato" disabled readonly />
 <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>


$(document).ready(function() {
    $('#dateRangePicker')
        .datepicker({
            format: 'dd/mm/yyyy',
            startDate: '01/01/2010',
            endDate: '12/30/2020',
            autoclose: true,
            language: 'da',
            enableOnReadonly: false
        });
    });

更新:我能够根据需要进行初始化.现在我真的想再次初始化它.

我试过调用$(document).off('.datepicker.data-api'); 正如文档中所述,但它对我不起作用.

这是一个表达我的烦恼的小提琴:FIDDLE

Answer 1

根据您给出的评论,这看起来像是适合您的解决方案

$(document).ready(function() {
    $('#state').on('change', function() {
       if ($(this).val() == 'on') {
           $('#dateRangePicker').datepicker({
                format: 'dd/mm/yyyy',
                startDate: '01/01/2010',
                endDate: '12/30/2020',
                autoclose: true,
                language: 'da',
                enableOnReadonly: false
            });
            $('#dateRangePicker > .form-control').prop('disabled', false);
        } else {
            $('#dateRangePicker').datepicker('remove');
            $('#dateRangePicker > .form-control').prop('disabled', true);
        }
    });
    $('#dateRangePicker > .form-control').prop('disabled', true);
});

看到这个jsfiddle的工作示例!