CODEWITHSUNDEEP
javascriptjquerydatepicker
Robert Ross
Robert Ross

Reputation: 1189

Disabling datepicker on an input field

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.

Upvotes: 2

Views: 14826

Answers (2)

casraf
casraf

Reputation: 21694

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>

Upvotes: 1

Hudhaifa Yoosuf
Hudhaifa Yoosuf

Reputation: 919

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", "");

Upvotes: 5

Related Questions