jQuery: enabling/disabling datepicker

Question

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

Answer 1

$("#from").datepicker('disable'); should work, but you can also try this:

$( "#from" ).datepicker( "option", "disabled", true );

Answer 2

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..

Answer 3

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

Answer 4

try this :

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

Answer 5

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...

Answer 6

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

/***
  *This is the toggle disabled function Start
  *
  **/
(function($) {
  $.fn.toggleDisabled = function() {
    return this.each(function() {
      this.disabled = !this.disabled;
      if ($(this).datepicker("option", "disabled")) {
        $(this).datepicker("option", "disabled", false);
      } else {
        $(this).datepicker("option", "disabled", true);
      }

    });
  };
})(jQuery);

/***
  *This is the toggle disabled function Start
  *Below is the implementation of the same
  **/

$(".filtertype").click(function() {
  $(".filtertypeinput").toggleDisabled();
});

/***
  *Implementation end
  *
  **/

$("#from").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
  }
});
$("#to").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

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