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

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

Answer 2

只要datepicker初始化以输入为目标，您就可以单独控制按钮单击日期选择器。

使用#kalib_dato而不是.datepicker()定位输入input-group#dateRangePicker。

为按钮范围添加ID ...例如＆＃39; kalib_spano＆＃39;然后按钮可以有条件地显示日期选择器。

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

Answer 3

如果其他人发现这是使用角度插件ng2-datetime使用bootstrap-timepicker和bootstrap-datepicker，我可以调整acrobat的答案。我不得不使用不同的选择器，但除此之外acrobat的解决方案适用于我的情况。我的类自定义日期时间选择器应用于插件的组件级别。我只使用插件的时间选择部分，禁用了datepicker。

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

试试此代码

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

Answer 5

不要在javascript中初始化datepicker。如果你不需要datepicker。

只需使用以下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>

如何禁用Bootstrap DatePicker

5 个答案: