Backwards compatibility and HTML5 date input - date formatting

Question

So, I'm running into this issue and maybe I'm just not thinking straight, but examples of how sites have handled this would help.

I want to use the HTML5 date input - it's nice and smooth. However, I need that date to get eventually put in as a date field in a mysql database. The issue is not with the post value from HTML5 date input - but rather when it's reverting back to text on older browsers.

If I say "Please format YYYY-MM-DD" by my input (this will be a highly public application visited from many browsers), then when using Chrome which is showing the date picker, Chrome auto formats to MM/DD/YYYY for the displayed date and I hear that is localized to the user.

Question is this: How to put a "Please format YYYY-MM-DD" label which will only show up when it has reverted to a text box? If I specify to the end user that they need to format it one way, and the date picker only allows them to do it a different way, won't that be hopelessly confusing? I anticipate this form being used from multiple locales so I can't anticipate the default formatting.

Please note this is a front end question; I understand how to take the POST values, but need the POST values of the backwards compatible text boxes to be uniform.

ciarand · Answer 1 · 2013-03-03T08:58:46.200

You could use the placeholder attribute as follows:

<input type="date" name="myName" placeholder="Please format YYYY-MM-DD">

When a browser doesn't recognize the date type, it'll render as a text input. Placeholders show on text inputs, but not on date inputs.

Now, unfortunately according to caniuse, only IE 10+ supports the placeholder attribute. I'm not sure if that's an issue for you.

If it is an issue, you can use Modernizr to test for features like placeholder support and add appropriate classes to the body. If that's the case, you could write a CSS rule that has something like:

.my-input-label {
  display: none;
}
.no-placeholder .my-input-label {
  display: inline-block; // Or block, if you need to support IE < 8
}

That will have the label show up on anything that doesn't support placeholder attributes, but they'll be removed from the layout flow on anything that does, thereby degrading gracefully.

Finally, another alternative would be to set a default value. Something like this:

<input type="date" name="myName" value="Please format YYYY-MM-DD">

It's not as classy, and it's worse from a UX standpoint, but the experience is universal for all browsers that don't support the date input type.

Note: I haven't tested Modernizr's classes on IE, so I'm not positive the class is no-placeholder.

Backwards compatibility and HTML5 date input - date formatting

1 Answers1