How to disable Bootstrap DatePicker

Question

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

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.

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

Heres a fiddle to demonstrate my troubles: FIDDLE

Answer 1

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

See this jsfiddle for a working example!

Answer 2

You can control the button click separately to the datepicker as long as the datepicker initialization targets the input.

Target the input #kalib_dato with .datepicker() instead of the input-group#dateRangePicker.

Add an id to the button span... such as 'kalib_spano' then the button can conditionally show the datepicker.

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

Answer 3

If someone else finds this that is using the angular plugin ng2-datetime which uses bootstrap-timepicker and bootstrap-datepicker under the hood, I was able to tweak acrobat's answer for this case. I had to use a different selector, but otherwise acrobat's solution was spot on for my case. My class custom-date-time-picker is applied at the component level for the plugin. I am only using the time-picker part of the plugin, having disabled the 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

Try this code

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

Answer 5

Don't initialize datepicker in javascript. If you dont need the datepicker.

Just use below HTML code.

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