When date input was added by HTML5, many believed that it would offer the users a friendly, interactive and known method of entering a date on a website. However; this new addition has failed to live up to the expectations and the major reason behind it remains the fickle nature of the format of the input given by the user.
Originally, the date input attribute was designed as a form element to pick values through a datepicker. The problem however, lies in the implementation of datepicker which changes from browser to browser. What it essentially means is that as a web designer you must be intending to allow user to pick a date in the format YYYY/MM/DD via datepicker and you designed your HTML validations accordingly, but when the user accesses the webpage through the browser on his system, he might see a completely different sequence of selections depending upon the default date settings in his/her system and the browser used.
Now there is no said rule in HTML5 that would allow the web designers to change the format in which the date element picks values. Therefore, the rigidness of the date element prompted designers to look for other ways to alter the format of the date to be entered by the user.
Let us say we wish to design a webpage that asks users for their birthdays and the format of the value entered must be YYYY-MM-DD. How are we going to achieve this using the date element given that it does not give the liberty to change the date format?
If the date format is absolutely critical to the functioning of the webpage, then we will need to make that choice. Below is a code snippet with the date format altered to the YYYY-MM-DD format.
<form>
Birthday:
<input type="text" name="input" placeholder="YYYY-MM-DD" required
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))"
title="Enter a date in this format YYYY-MM-DD"/>
<input type="submit">
</form>
‘Where is the date element?’ Well, like we said, it cannot be achieved with HTML5 alone if we were using the date element, but we never said it cannot be achieved if we were not using the date element.
Key Pointers around the code
- The user will need to enter the values manually as he would not have the privilege of selecting them from the datepicker.
- The pattern element ensures that the values entered are valid. Pattern attribute is thus used to achieve HTML form validations.
- The required element forces the user to enter some value as the field cannot be left blank.
- The first parenthesis in the pattern section checks for the correct year values, followed by the correct month and the correct day values.
- To change the date to a different format, we just need to change the sequence of the three checks and the separator used, according to the requirements. Below is the code that would take date in ‘YYYY/MM/DD’ format.
This solution has the disadvantage that there is no popup date picker. The solution would be go back to one of the jquery datepicker widget.
<form>
Birthday:
<input type="text" name="input" placeholder="YYYY-MM-DD" required pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])/(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])/(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" title="Enter a date in this format YYYY/MM/DD"/>
<input type="submit">
</form>
Below is the complete code snippet followed by a snapshot of how it would look on a webpage
<!DOCTYPE html>
<html>
<head>
<form>
Birthday:
<input type="text" name="input" placeholder="YYYY-MM-DD" required pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])/(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])/(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" title="Enter a date in this format YYYY/MM/DD"/>
<input type="submit">
</form>
</body>
</html>
