changing minDate option in JQuery DatePicker not working

Question

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?

Answer 1

Draco,

You can do it like this:

$("#datePickerId").datepicker(
    { dateFormat: 'DD, d MM yy',
      minDate: new Date(2009, 10 - 1, 25), // it will set minDate from 25 October 2009
      showOn: 'button',
      buttonImage: '../../images/calendar.gif',
      buttonImageOnly: true,
      hideIfNoPrevNext: true
    }
   );

remember to write -1 after month (ex. for june is -> 6 -1)

Answer 2

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

Answer 3

Use minDate as string:

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

This would set today as minimum selectable date .

Answer 4

Change the minDate dynamically

.datepicker("destroy")

For example

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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