date-input-polyfill
date-input-polyfill copied to clipboard
Option for different date format presented to user and used as input.value (or match Chrome & Firefox user-format/value-format behaviour out of the box)
I'm having trouble implementing validation for a date field because this polyfill behaves differently to Chrome's and Firefox's date picker implementations.
[I'm British by the way, so I'm using dd/mm/yyyy as my human readable examples]
Chrome and Firefox will display the date to me in the format dd/mm/yyyy. But if you call .value
on the input the result is in the format yyyy-mm-dd,
…makes sense for localisation (e.g. the British/U.S. date format differences).
Calling .value
upon an input this polyfill is implemented on returns the date format as it is displayed to the user — as if the input was type="text"
.
I think because of this difference, the validation I'm using (Bootstrap4) balks at the date value.
For this polyfill, there is an option to choose the date format but it acts on both the user facing and value formats simultaneously.
jQuery UI's date picker has options for both altFormat
and dateFormat
which allow you to manage a user facing format and a value format. I don't agree with the naming of these options but they facilitate a flexible solution to this scenario.
If this is actually possible, apologies. Perhaps I can help write some documentation on how to implement it.
Ran into this same problem. The value of input needs to be yyyy-mm-dd no matter what is displayed to users to be considered a true polyfill.