#6917 closed bug (wontfix)

Opened January 30, 2011 07:08PM UTC

Closed February 01, 2011 02:29PM UTC

Datepicker min/maxDate don't prevent typing in dates outside this range

Reported by: WetCoast Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

While setting minDate and maxDate restricts selecting a date from the datepicker popup calendar, the user can still type a date outside this range into the text field and then tab to the next field, leaving the date outside the range in the text field.

Here is some reduced code demonstrating this. The date should be restricted to between 1/1/1990 and 12/31/1999, but when the calendar pops up, you can still type 1/1/1700 into the field and tab to the next, leaving the date in place even though it is outside the expected range.

http://jsbin.com/ojumi5

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/sunny/jquery-ui.css" />
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
   <script type="text/javascript">
$(document).ready(function() {
   $('.date').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'mm/dd/yy',
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(1999, 11, 31)
   });
});
   </script>
</head>
<body>
   <form>
      <div>
         <label for="mydate">Date</label>
         <input type="text" name="mydate" id="mydate" maxlength="12" class="date">
      </div>
      <div>
         <label for="next">Next</label>
         <input type="text" name="next" id="next" maxlength="12">
      </div>
   </form>
</body>
</html>
Attachments (0)
Change History (1)

Changed February 01, 2011 02:29PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: new → closed

The datepicker widget is only designed to restrict dates within the calendar. If you want to prevent users from manually typing in an invalid date, you should use the validation plugin or make the text field readonly.