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!