Disabling datepicker on an input field

Question

Cuurently I have an input field using datepicker . I am wondering how to disable the datepicker callendar popping up when I click on that field, since on my page I want the date option to be available only on certain conditions.

<input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date">

I tried with :

 $("#date").datepicker('disable');

And with :

$( "#date" ).datepicker( "disabled", true );

None worked.

Answer 1

One of the easiest way is to remove all the pointer events for that input field.

$("#date").css('pointer-events', 'none');

This will keep the data intact if you want.

And to re enable pointer events.

   $("#date").css("pointer-events", "");

Answer 2

This seems to be working:

$('#date').datepicker('option', 'disabled', t_or_f)

Working example:

 function toggleDatePicker (state) { // this actually does the magic $('#date').datepicker('option', 'disabled', !state) } $(document).ready(function() { // init $('#date').datepicker(); // ignore this, just for the sake of example $('#butt').on('click', function() { var st = parseInt($(this).data('state')); $(this).data('state', st = 1 - st); // toggle 0 and 1 $(this).text(st ? 'Disable' : 'Enable'); toggleDatePicker(Boolean(st)); }); }); 

 @import url(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date"> <button id="butt" data-state="1">Disable</button>