如何禁用 Bootstrap DatePicker

Question

禁用 DatePickerhere 时遇到问题。我可以禁用输入字段，但日历字形图标在按下时仍会打开选择器。

我试过将选择器设置为禁用和只读属性，但这仅适用于输入字段。我无法禁用 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 来证明我的烦恼：FIDDLE

Answer 1

不要在 javascript 中初始化日期选择器。如果您不需要日期选择器。

只需使用下面的 HTML 代码。

<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>

Answer 2

根据您给出的评论，这似乎是适合您的解决方案

$(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);
});

有关工作示例，请参阅 this jsfiddle！

Answer 3

只要日期选择器初始化针对输入，您就可以单独控制按钮点击到日期选择器。

将输入 #kalib_dato 设为 .datepicker() 而不是 input-group#dateRangePicker。

为按钮范围添加一个 id...例如 'kalib_spano' 然后按钮可以有条件地显示日期选择器。

$("#kalib_spano").click(function () {
    if (!someDisabledCondition) {
        // trigger the datepicker
        $("#kalib_dato").datepicker("show");
    }
});

Answer 4

如果其他人发现它在后台使用 angular 插件 ng2-datetime which uses bootstrap-timepicker 和 bootstrap-datepicker，我可以调整 acrobat 对这种情况的回答。我不得不使用不同的选择器，但除此之外，acrobat 的解决方案非常适合我的情况。我的 class custom-date-time-picker 应用于插件的组件级别。我只使用插件的时间选择器部分，禁用了日期选择器。

<datetime class="custom-date-time-picker" [datepicker]="false" [timepicker]="timePickerOptions"></datetime>

$('.custom-date-time-picker .form-control').prop('disabled', true); $('.custom-date-time-picker .form-control').prop('disabled', false);

Answer 5

试试这个代码

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

如何禁用 Bootstrap DatePicker

How to disable Bootstrap DatePicker

twitter-bootstrap-3

bootstrap-datepicker