Client-side validation of input type date does not work

Question

I have a form containing a date and datetime field:

@Html.TextBoxFor(model => model.A, new { @type = "datetime" })
@Html.TextBoxFor(model => model.B, new { @type = "date" })

Model:

public class TestModel
{
  [DataType(DataType.Date)]
  public DateTime A {get;set;}

  [DataType(DataType.Date)]
  public DateTime B {get;set;}
}

By using these input types an iPad shows nice date(time) pickers. The fields are validated using client-side validation. For the datetime field (A) it works, but the date field (B) will raise an error: "please enter a valid date." How do I solve this?

Examples:

• This iPad (Safari) value for datetime is valid (according to MVC client-side validation): 15 dec. 2011 9:20
• This iPad (Safari) value for date is invalid: 15 dec. 2011

It's hard to debug code on an iPad, so I have no clue how Safari changes the date format when setting the input's value attribute.

Edit: I discovered the datetime format is universal datetime format (yyyy-MM-DDTHH:mmZ), while the date format is yyyy-MM-dd. Probably the client-side validator does understands universal datetime and not yyyy-MM-dd due to localization.

Kampala

Please give an example of input for B that raises the "please enter a valid date" error but that you consider valid. – Implacental

@Guillaume's deleted comment: it is valid HTML, but indeed not handled by every browser. Since iPad supports these input types I use it only in an iPad view. For normal browsers I use a jQuery datetime picker. – Kampala

type="date" is new in HTML5. What is your doctype ? dev.w3.org/html5/markup/input.html – Wraith

@Wraith it's valid but in HTML 5 and so not supported everywhere yet. – Jennine

@Guillaume, it has nothing to do with the doctype. The problem is the datetime type's value is valid according to MVC client-side validation, but (almost the same format) date type's value is not. – Kampala

I have this EXACT same problem and I am getting nowhere trying to figure it out. – Greco

Take a look at the comments here: github.com/jzaefferer/jquery-validation/issues/571 I used the code listed in the link of that comment, adjusted for ISO 8601 format, and things are good here. – Barron

Answer 1

I had the exact same problem and was maddened beyond belief when viewing a mobile site I'm developing on my iPhone. The discussion in the issue below solved it for me.

https://github.com/jzaefferer/jquery-validation/issues/20.

Also, to go the distance with this in a seamless way, I created the following razor editor template for Date data types:

@model DateTime?
@Html.TextBox("myDate", ViewData.Model.ToIso8601FullDate(), new { type = "date", @class = "text-box single-line" })

and a handy extension method to feed the html 5 date input type a format it enjoys working with according to the spec for input type=date:

public static string ToIso8601FullDate(this DateTime? d)
{
    if (!d.HasValue) return null;

    return d.Value.ToString("yyyy-MM-dd");
}

Greco

This wont work if you have multiple DateTime Controls on one page as they all will have the same ID. How can you change the "myDate" string to something unique like the PropertyName of the Model? – Wield