Date is one of the new, and much needed, input types added in HTML5. This has been added as a replacement of using a text box for the input of dates. Below is a screenshot of the custom UI that the Opera web browser automatically implements for this new input type.
Display in Modern Browsers
This is a screenshot of the Opera web browser’s UI for the date input field. The actual display of this field is handled by the web browser and will vary in each browser and device the page is being viewed on. For example, iOS and other mobile devices will display a more mobile friendly calendar picker than the desktop version of Opera shown above.
Here’s the HTML5 source for the above screenshot:
<!DOCTYPE html> <meta charset="utf-8"> <html lang="en"> <head> </head> <body> Date: <input type=date /> </body> </html>
As you can see in the screenshot the format for the date is “yyyy-mm-dd” That is a four digit year, two digit month and a two digit day in that order, separated each by a hyphen.
What about Older Browsers?
Older web browsers render any
<input> tags with an “unknown” type as a regular text box. So consequentially older web browsers will render the above date input type as a text input type.
Here’s a modified version of the above code including a “patch” using the jQuery UI DatePicker and Modernizr to display custom UI in older browsers that do not support the date input type. The above screenshot is an example of this in action in Internet Explorer 8.
This site is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. We also participates in affiliate programs with Udemy, and other sites. This site is compensated for referring traffic and business to these companies.