DatePicker data validator triggers false negatives in IE7 / IE8

Question

I have a basic form validation that includes two jQuery UI DatePickers. The date format is yy-mm-dd. Both DatePickers have a mandatory and dated check.

They work in both Chrome and FF, but cause false negatives (valid input is considered invalid) in IE7 / IE8.

Date picker setting:

$('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' }); 

This is not related, but I thought I would include, just in case:

 $.validator.addMethod("endDate", function(value, element) { var startDate = $('#startDate').val(); return Date.parse(startDate) <= Date.parse(value); }); 

Actual check:

 $('#ExampleForm').validate({ rules: { StartDate: { required: true, date: true }, EndDate: { required: true, date: true, endDate: true } }, messages: { StartDate: { required: "Start Date required", date: "Invalid date. Must be formatted yyyy-mm-dd" }, EndDate: { required: "End Date required", date: "Invalid date. Must be formatted yyyy-mm-dd", endDate: "Start date must occur before end date." } }, errorPlacement: function(error, element) { error.appendTo(element.parent().next()); }, submitHandle: function(form) { form.submit(); } }); 

In IE7 / IE8, valid input (just picking a date) using both DatePickers will result in a date error ("Invalid date. Must be formatted yyyy-mm-dd"). This does not happen in other browsers.

It also does not cause Javascript errors.

Thanks in advance,

Yang

Answer 1

I think you are looking for a dateISO option:

 $('form').validate({ rules: { StartDate: { required: true, dateISO: true }, EndDate: { required: true, dateISO: true } }, messages: { StartDate: { required: "Start Date required", dateISO: "Invalid date. Must be formatted yyyy-mm-dd" }, EndDate: { required: "End Date required", dateISO: "Invalid date. Must be formatted yyyy-mm-dd" } }, submitHandler: function(form) { form.submit(); } }); 

IE will not parse dates in yyyy-mm-dd format, so using regular date not done in IE. I believe jQuery validation simply uses Date.parse or new Date(dateString) to validate. To check this, try making a new Date("1987-11-14") and warning the value in IE and FF. You will get NaN in IE and a date object in FF.

Here is a working example: http://jsfiddle.net/andrewwhitaker/QqSrJ/2/

Answer 2

An example to overcome IE NaN

 var startDate = "1987-11-14"; startDate = startDate.split("-"); startDate = new Date(startDate[0], + startDate[1], startDate[2]); alert(startDate); 

Answer 3

Send the date when you need to format it in a hidden field in the form using altField and altFormat , this fixed my NaN errors.

 $("#selectorDate").datepicker({ dateFormat: 'mm/dd/yy', altField: "#another_field_date", altFormat: "yy-mm-dd" }); 

Answer 4

I had a problem in my own code where the date format was the same as described above and the form in JSP (with a little help from the Spring form tags) looked like this:

 <fmt:formatDate pattern="yyyy-MM-dd" value="${user.dateOfBirth}" var="dob"/> <form:input id="date-of-birth" type="date" path="dateOfBirth" value="${dob}"/> 

The problem was that the date field is optional (required = false in the JQuery validation rules), but it used a DatePicker and thus was automatically checked when it was populated. The problem was that in all browsers and on IE9 (and above) it was correctly checked, but in IE8 it stopped checking the validity of the "invalid date".

I played with jquery validation rules, I tried using dateISO (although I by no means say that this solution will not work for some), but to no avail.

It turns out that in my case all I had to do was remove the attribute 'type = "date". Now the date is correctly checked and remains an optional field.

Answer 5

In my case, the attribute class = "date" (and not type = "date") in the input field forced the validator to automatically add a date check to the field, which caused a false negative effect in IE8. So I changed the class to "date-select", then used the dateISO rule, as in Andrew Whitaker's answer.