[jquery] jQuery: enabling/disabling datepicker

In my php-file, I want to use the jQuery Datepicker.

When my file loads, I create the Datepicker disabled.

Then, when a special field in my php-file (it is a form) is filled, I want to enable the Datepicker.

So, initially my Datepicker looks like this:

$("#from").datepicker({
    showOn: "both",
    buttonImage: "calendar.gif",
    buttonImageOnly: true,
    buttonText: "Kalender",
    showAnim: "drop",
    dateFormat: "dd.mm.yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showWeek: true,
    firstDay: 1,
    dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    weekHeader: "KW",
    disabled: true,
    onClose: function(selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

This works just fine, no problem so far. The problem comes, when I want to disable the field.

If a special field is filled, I call $("#from").datepicker('enable');

This also works fine, BUT now I want to disable it again if the special field I mentioned it empty again.

Then I use $("#from").datepicker('disable'); and the field itself is grayed, but I can still use the field to enter values, the calender pops up and even the calender-image next to the box is clickable.

Anyone has an idea why this is the case? Am I missing something?

You can use this code to toggle disabled with jQuery Datepicker and with any other form element also.

/***_x000D_
  *This is the toggle disabled function Start_x000D_
  *_x000D_
  **/_x000D_
(function($) {_x000D_
  $.fn.toggleDisabled = function() {_x000D_
    return this.each(function() {_x000D_
      this.disabled = !this.disabled;_x000D_
      if ($(this).datepicker("option", "disabled")) {_x000D_
        $(this).datepicker("option", "disabled", false);_x000D_
      } else {_x000D_
        $(this).datepicker("option", "disabled", true);_x000D_
      }_x000D_
_x000D_
    });_x000D_
  };_x000D_
})(jQuery);_x000D_
_x000D_
/***_x000D_
  *This is the toggle disabled function Start_x000D_
  *Below is the implementation of the same_x000D_
  **/_x000D_
_x000D_
$(".filtertype").click(function() {_x000D_
  $(".filtertypeinput").toggleDisabled();_x000D_
});_x000D_
_x000D_
/***_x000D_
  *Implementation end_x000D_
  *_x000D_
  **/_x000D_
_x000D_
$("#from").datepicker({_x000D_
  showOn: "button",_x000D_
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",_x000D_
  buttonImageOnly: true,_x000D_
  buttonText: "Select date",_x000D_
  defaultDate: "+1w",_x000D_
  changeMonth: true,_x000D_
  changeYear: true,_x000D_
  numberOfMonths: 1,_x000D_
  onClose: function(selectedDate) {_x000D_
    $("#to").datepicker("option", "minDate", selectedDate);_x000D_
  }_x000D_
});_x000D_
$("#to").datepicker({_x000D_
  showOn: "button",_x000D_
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",_x000D_
  buttonImageOnly: true,_x000D_
  buttonText: "Select date",_x000D_
  defaultDate: "+1w",_x000D_
  changeMonth: true,_x000D_
  changeYear: true,_x000D_
  numberOfMonths: 1,_x000D_
  onClose: function(selectedDate) {_x000D_
    $("#from").datepicker("option", "maxDate", selectedDate);_x000D_
  }_x000D_
});

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>_x000D_
<form>_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>_x000D_
        <input class="filtertype" type="radio" name="filtertype" checked="checked" value="bydate">_x000D_
      </th>_x000D_
      <th>By Date</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>_x000D_
        <label>Form</label>_x000D_
        <input class="filtertypeinput" id="from">_x000D_
      </td>_x000D_
      <td>_x000D_
        <label>To</label>_x000D_
        <input class="filtertypeinput" id="to">_x000D_
      </td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>_x000D_
        <input class="filtertype" type="radio" name="filtertype" value="byyear">_x000D_
      </th>_x000D_
      <th>By Year</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td colspan="2">_x000D_
        <select class="filtertypeinput" disabled="disabled">_x000D_
          <option value="">Please select</option>_x000D_
          <option>test 1</option>_x000D_
          <option>test 2</option>_x000D_
        </select>_x000D_
      </td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th colspan="2">Report</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td colspan="2">_x000D_
        <select id="report" name="report">_x000D_
          <option value="">Please Select</option>_x000D_
          <option value="Company">Company</option>_x000D_
          <option value="MyExportAccount">MyExport Account</option>_x000D_
          <option value="Sectors">Sectors</option>_x000D_
          <option value="States">States</option>_x000D_
          <option value="ExportStatus">Export Status</option>_x000D_
          <option value="BusinessType">Business Type</option>_x000D_
          <option value="MobileApp">Mobile App</option>_x000D_
          <option value="Login">Login</option>_x000D_
        </select>_x000D_
      </td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</form>

This works for me on toggling enable and disable datepicker of JQuery:

if (condition) {
          $('#ElementID').datepicker(); //Enable datepicker                   
} else {
         //Disable datepicker without the ability to enter any character on text input
          $('#ElementID').datepicker('destroy');
          $('#ElementID').attr('readonly', true); }

I don't know why but when I use enable/disable in datepicker options, it doesn't behave the way it should be. It only works after you enable and disable it, but once you disable it, it doesn't enable again after, so the code above works perfectly fine for me:

if (condition) {
      $('#ElementID').datepicker('enable'); //Enable datepicker                   
} else {
      //Disable datepicker but I cannot enable it again once it goes through this condition
      $('#ElementID').datepicker('disable');  }

$('#ElementID').unbind('focus');

did the trick for me !!

The most up-voted solution did not work for me. I have date pickers with default of disabled, which works fine. When it comes time to enable them in the window.onload function, though, the $("#award_start_date").datepicker( 'enable' ); syntax did not enable the widgets. I was able to edit the field as if it were a text input field, but did not get the calendar chooser.

What does work is this:

if (x[i].id == "award_start_date") {
  $("#award_start_date").datepicker( {enabled: true} );
}
if (x[i].id == "award_end_date") {
  $("#award_end_date").datepicker( {enabled: true} );
}

It may be that this simply recreates the datepickers, but for my purposes, that is fine.

This is my second day using jQuery UI awesomeness, so I may be missing some of the finer points...

Also set the field to disabled when you disable the datePicker e.g

$("input").prop('disabled', true);

To stop the image being clickable you could unbind the click event on that

$('img#<id or class ref>').unbind('click');

   $("#datepicker").datepicker({
     dateFormat:'dd/M/yy',
     minDate: 'now',
     changeMonth:true,
     changeYear:true,
     showOn: "focus",
    // buttonImage: "YourImage",
     buttonImageOnly: true, 
     yearRange: "-100:+0",  
  }); 

  $( "#datepicker" ).datepicker( "option", "disabled", true ); //missing ID selector

simply use the following code

$("#from").datepicker({
 showOn: "off"
});

it will not show the display of datepicker

You can replace form field with its copy:

var copy = $('#from').clone(); $('#from').replaceWith(copy);

And after that initialize datetimepicker again.

Datepicker is disabled automatically when the input text field is made disabled or readOnly:

$j("#" + CSS.escape("${status.expression}")).datepicker({
    showOn: "both",
    buttonImageOnly: true,
    buttonImage: "<c:url value="/static/js/jquery/1.12.1/images/calendar.gif"/>",
    dateFormat: "yymmdd",
    beforeShow: function(o, o2) {
    var ret = $j("#" + CSS.escape("${status.expression}")).prop("disabled")
        || $j("#" + CSS.escape("${status.expression}")).prop("readOnly");

    if (ret){
        return false;
    }

    return o2;
}
});

This is what worked for me

$("#from").attr("disabled", true);

Well You can remove datepicker by simply remove hasDatepicker class from input.

Code

$( "#from" ).removeClass('hasDatepicker')

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

This is works 100% with bootstrap Datepicker

try this :

$("#form").datetimepicker("disable");

Try something like this it will help you

$("#from").click(function () {
           $('#from').attr('readonly', true);
     });

Thanks

I have a single-page app in our company intranet where certain date fields need to be "blocked" under certain circumstances. Those date fields have a datepicker binding.

Making the fields read-only wasn't enough to block the fields, as datepicker still triggers when the field receives focus.

Disabling the field (or disabling datepicker) have side effects with serialize() or serializeArray().

One of the options was to unbind datepicker from those fields and making them "normal" fields. But one easiest solution is to make the field (or fields) read-only and to avoid datepicker from acting when receive focus.

$('#datefield').attr('readonly',true).datepicker("option", "showOn", "off");

I am also having This Error!

Then i change this

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

to This

$("#from").datepicker("disable");

mistake : single and double quotes..

Now its Work fine for me..

try

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

For those who are using 2012-2013 versions, you can do this:

$('#from').datepicker('remove');

Then to enable it back:

$('#from').datepicker('add');

Here's the documentation.