[jquery-ui] changing minDate option in JQuery DatePicker not working

I have declared a date picker instance as follows:

    $("#datePickerId").datepicker(
    { dateFormat: 'DD, d MM yy',
      minDate: 0,
      showOn: 'button',
      buttonImage: '../../images/calendar.gif',
      buttonImageOnly: true,
      hideIfNoPrevNext: true
    }
   );

I now want to change to the minDate option so I do this:

$('#datePickerId').datepicker('option', 'minDate', 3);

But nothing happens. Was I suppose to do anything else? What other possible causes could there be?

This question is related to jquery-ui datepicker

The answer is


There is no need to destroy current instance, just refresh.

$('#datepicker')
    .datepicker('option', 'minDate', new Date)
    .datepicker('refresh');

How to dynamically alter the minDate (after init)

The above answers address how to set the default minDate at init, but the question was actually how to dynamically alter the minDate, below I also clarify How to set the default minDate.

All that was wrong with the original question was that the minDate value being set should have been a string (don't forget the quotes):

$('#datePickerId').datepicker('option', 'minDate', '3');

minDate also accepts a date object and a common use is to have an end date you are trying to calculate so something like this could be useful:

$('#datePickerId').datepicker(
    'option', 'minDate', new Date($(".datePop.start").val())
);

How to set the default minDate (at init)

Just answering this for best practice; the minDate option expects one of:

  1. a string in the current dateFormat OR
  2. number of days from today (e.g. +7) OR
  3. string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m')

@bogart setting the string to "0" is a solution as it satisfies option 2 above

$('#datePickerId').datepicker('minDate': '3');

jQuery UI docs for minDate


Use minDate as string:

$('#datePickerId').datepicker({minDate: '0'});

This would set today as minimum selectable date .


Say we have two date select fields, field1, and field2. field2 date depends on field1

$('#field2').datepicker();
$('#field1').datepicker({
  onSelect: function(dateText, inst) {
    $('#field2').val("");
    $('#field2').datepicker("option", "minDate", new Date(dateText));
  }
});

Change the minDate dynamically

.datepicker("destroy")

For example

<script>
    $(function() {
      $( "#datepicker" ).datepicker("destroy");
      $( "#datepicker" ).datepicker();
    });
  </script>

  <p>Date: <input type="text" id="datepicker" /></p>

Month start from 0. 0 = January, 1 = February, 2 = March, ..., 11 = December.