JQueryUI DatePicker replacing invalid input with minDate

Question

I have a date field hooked up to a jQueryUI DatePicker calendar.

This DatePicker has min and max dates, though the user can still type dates outside of this range into the text field. I have server-side validation to catch these cases that returns an error message to the user and prevents them from advancing.

My problem is that when the form loads again after incorrect input, and tries to display the data already entered, the DatePicker replaces the invalid date with the closest valid date.

For example, entering a date before the min date returns the form with an error and the min date entered in the field.

Is there any way to prevent the date picker from changing this value?

Why don't you instead validate the date field with Javascript before submitting the form? This will produce a better user experience since users won't have to wait for the values to submit, then an error to come back, and the page won't even have to reload. — Ken Herbert
We are also adding JavaScript validation. However, JavaScript is too easy to circumvent, either accidentally or maliciously, so all data must be verified by the back end before being saved. Also, we try to validate as much as possible at once in the back end before returning back to the form with errors, so JavaScript would get in the way of this consistency with our page validation unless we duplicated ALL of our back end validation for EVERY page in the website, which simply isn't going to happen. — Krylose

Jain Jain · Accepted Answer · 2014-02-08T10:05:52

Datepicker never accept any date outside on its range of min/max date.

So I have an solution for your problem
Make some changes in your datepicker as follows:

1) Remove minDate & maxDate
2) set your wrong date in datepicker field
3) set minDate/maxDate in beforeShow function

Eg:

$('#your_id').datepicker({
     dateFormat: 'dd-mm-yy',
     beforeShow: function(){
       $(this).datepicker("option", "minDate", new Date(07-02-2014) );
       $(this).datepicker("option", "maxDate", new Date(09-02-2014) );
     }
});

This could helps you a lot

JQueryUI DatePicker replacing invalid input with minDate

1 Answers