CODEWITHSUNDEEP
jquerytypescripttwitter-bootstrapdatepicker
stm
stm

Reputation: 334

How to disable and enable the bootstrap datepicker

I am trying to disable and enable the bootstrap datepicker.
The method described in How to disable Bootstrap DatePicker doesn’t work for me, probably because I need to disable/enable it outside of $(document).ready().
jQuery ('.date').datepicker('remove'); works to disable it, but I can’t enable it again.

I also tried
jQuery('.date').prop('disabled', true);
and
jQuery('.date').datepicker('option', 'disabled', true);
without success.

How can I enable the datapicker again or how can I disable it in another way?

Update: Part of the HTML:

<div class="date">
  <input type="text" name="p_date" placeholder="" class="clr-input">
  <span class="input-group-addon">
    <clr-icon shape="calendar"></clr-icon>
  </span>
</div>

Upvotes: 0

Views: 2066

Answers (1)

MUlferts
MUlferts

Reputation: 1330

I am not sure about your selectors without seeing the HTML, but look at the snippet below to see that the disable and enable parts are done outside the $(document).ready() function successfully. Maybe you have an issue with the specific selector you are using? That snippet is modified from the answer you linked.

Edit: Ok, seeing your HTML, it looks like you were using the surrounding div for the selector, but that was not accessing the nested input. I'm guessing that clr element is some kind of icon from another library or css, but you could access that in a similar way. See the updated snippet:

$(document).ready(function() {
    $('.date').datepicker({
        format: 'dd/mm/yyyy',
        startDate: '01/01/2010',
        endDate: '12/30/2020',
        autoclose: true,
        language: 'da',
        enableOnReadonly: false
    });
});

$('#on').click(function(){
  $('.date > input').prop('disabled', false);
})

$('#off').click(function(){
  $('.date > input').prop('disabled', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<button id="on">On</button>
<br>
<button id="off">Off</button>

<br><br><br><br><br><br>
<div class="date">
  <input type="text" name="p_date" placeholder="" class="clr-input">
  <span class="input-group-addon">
    <clr-icon shape="calendar"></clr-icon>
  </span>
</div>

Upvotes: 1

Related Questions