如何禁用Bootstrap DatePicker [英] How to disable Bootstrap DatePicker

问题描述

无法在 DatePickerhere 上禁用.我无法禁用输入字段，但按下日历glyphicon仍会打开选择器.

Having trouble disabling the DatePickerhere. Im able to disable the input field but the calender glyphicon will still open the picker when pressed.

我尝试设置选择器的禁用和只读属性，但这仅适用于输入字段.我无法禁用glyphicon来完全禁用该控件.

I've tried setting the disabled and readonly property of the picker but that only applies to the input field. I can't disable to glyphicon to disable the control completely.

问题:如何完全禁用该控件?

QUESTION: How do i disable the control completely ?

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

Here's what i've tried so far:

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

更新:我可以按需初始化它.现在，我真的想再次取消初始化.

UPDATE: Iv'e come as far that i am able to initialize it on demand. Now i would really like do un-initialize it again.

我尝试调用$(document).off('.datepicker.data-api');如文档中所述，但这对我不起作用.

Iv'e tried calling $(document).off('.datepicker.data-api'); as stated in the docs but it's not working for me.

在这里摆弄一个小提琴来演示我的麻烦: FIDDLE

Heres a fiddle to demonstrate my troubles: FIDDLE

推荐答案

通过您提供的注释，这看起来像是适合您的解决方案

By the comments you gave this looks like a suitable solution for you

$(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 ！

See this jsfiddle for a working example!

这篇关于如何禁用Bootstrap DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！