jquery datepicker allows date less than minDate

4
votes

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?

3
jquerydatepickerjquery-ui-datepicker
Make the input field readonly - Shehzad Bilal

3 Answers

1
votes

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

0
votes

Another possible option to this is to use an Input Mask. With the inputs/jQuery you can use the .Mask prototype and forces the user to enter the valid date format you're looking for. You can also use the moment.js library to use a custom combinations of validations as well.

$(".someClass").mask("00/00/0000");

This will force a date of 01/01/2017, instead of 1/1/1 which gets the date value confused in the JS.