Search code examples
jquerydatepickerjquery-ui-datepicker

jquery datepicker allows date less than minDate

I have a datepicker and it can not allow dates prior to today VIA the editbox.

var dateOptions = { 
  dateFormat: "mm/dd/yy", 
  constrainInput: true, 
  gotoCurrent: true, 
  minDate: new Date()
};

$('.date').datepicker(dateOptions);
$('.date').datepicker('setDate', new Date());

In the html it's implemented as:

<label class="text14"><strong>Depart</strong></label>
<input type="text" id="tbDTimeOne" maxlength="10" size="10" name="tbDTimeOne" class="colum130 date" /> <img src="images/calendar.png" style="margin-left:-25px;" />

OK, so here's what happens. The page gets rendered, the onready function gets called, date input gets set to todays date, user tabs/clicks to the date input, the calendar pops up, the user edits the existing date via the keyboard and sets it to a date prior to today, the user tabs to the next field. The input accepted and shown is a date prior to the minDate.

What's the solution to this?

Solution

  • The Datepicker does not restrict keyboard input (see http://bugs.jqueryui.com/ticket/6917)

    $('.date').attr('readonly', 'readonly');

    would be a solution, but then you'll lose the possibility to enter text by Hand. If you need to keep this functionality, you can still validate the input http://keith-wood.name/uiDatepickerValidation.html