Date input and validation

I have noticed that if I use the date input type, it requests the date in dd/mm/yyyy format (the right format, rather than the US format :shifty: ) but the value is returned in the POST array in the format yyyy-mm-dd - at least it does in FF, Chrome and Edge.

However, if the browser doesn’t support the date input type, the value is treated as a text field (which I gather is the fallback for the newer input types) and passed in the format dd/mm/yyyy as entered.

This makes validating the date a bit of a PITA as I need to check the format of the returned value.

Have I understood this correctly. or have I missed something?

This is not really my area but I think you have it all correct.

The MDN site confirms what you say and has some workarounds

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

I’m guessing you’ve seen that already though :slight_smile:

1 Like

If you go for the very simple first example, without the javascript, you can enhance its usability by adding a placeholder attribute.

<input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" placeholder="yyyy-mm-dd">

Like the pattern attribute, supporting browsers will ignore it, but those that fallback to text will show it, giving a hint to the expected format, so they don’t have to keep guessing when it continues to flag as invalid. I would think that date format may seem backward to many non-devs and not an ovbious choice for them.

3 Likes

Thanks, chaps.

Yes, I’ve used a pattern and a placeholder, although I didn’t try to change the requested format.

:blush: No, gulp, I hadn’t looked there I must admit.

For the time being, I have reverted to a text input type, which at least gives a consistent result.

1 Like

Having looked at the MDN page and the fact that the input date format depends on the user’s locale, it strikes me it is nigh impossible to cater for browsers that support date input and those that don’t.

Why?
Regardless of the input format, the output format is consistantly yyyy-mm-dd on supporting browsers.
So using the pattern and placeholder workaround (in that format) should give consitant results from all browsers.

What would you consider to be the least common denominator, a “yyyy-mm-dd” string, a “msecs since 1970” ? My take is HTML - string, JavaScript - timestamp, but maybe not.

Any way to go to selects instead of text inputs on datepicker fail?

Because as far as I can see it’s not possible to change the required input date format which according to the MDN doc is either dd/mm/yyyy or mm/dd/yyyy is you’re across the pond. Simply specifying a pattern doesn’t seem to do owt.

Actually text doesn’t seem to be much of a problem. All I lose is the date picker, which in this case, given it’s a date of birth is probably not that helpful (finding the year is a PITA).

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser , but the parsed value is always formatted yyyy-mm-dd .

The placeholder is only for non-supporting browsers, to let them know the format you want.

1 Like

I would go with a tighter input. Admittedly less friendly but I see no other fool proof way.

eg. what about “12-12-12” ?

Granted, a months worth of radios, please no. But a single select could work.

1 Like

Ah, I was too tired last night to check it properly. :slight_smile:

To clarify, pattern and placeholder are actually invalid attributes for the date type, so browsers that support date will ignore them. But this is used to your advantage, as browsers that don’t support date will treat it as text where pattern and placeholder will be used.

2 Likes