Web Development Adventures: HTML5 Date Input

HTML5 Date Input - Caveats

One of the many new input types that HTML5 introduced is the date input type which, in theory, should allow a developer to provide the user with a simple, usable, recognizable method of entering a date on a web page. But sadly, this input type has yet to reach its full potential.

Briefly, the date input type is a form element that allows the capture of a date from a user, usually via a datepicker. The implementation of this datepicker is up to the browser vendor, as the HTML5 specification does not tell vendors how to implement the input’s UI.

The input itself can of course be used without using any of its available attributes:

<label for="when">Date:</label>
<input id="when" name="when" type="date">

Or you can specify minimum and maximum date values via the min and max attributes, ensuring that a user can only choose dates within a specific range:

<label for="when">Date:</label>
<input id="when" name="when" type="date" min="2016-01-01" max="2016-12-01">

You can also use the step attribute to specify, in days, how a date can increment. The default is 1.
This of course is the theory and a fine reality it would be, if it were so but alas it is not.

The input field
Firefox & Safari Support
Neither Firefox nor Safari support this input type; it is treated as a simple text field with no formatting and no special interaction.

Chrome & Opera Support
Chrome and Opera have the same implementations which display a date placeholder (or date value if the input’s value attribute has been set) using the user’s system settings’ date format. There are also some controls that allow the user to clear the input field, some arrows to cycle up and down between values, and an arrow that will open a datepicker

Code Snippet

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="MyStyles.css" />
        <title>Demo HTML5 Date</title>
    </head>
    <body>
        <p>Hello!</p>
        <form id="myform">
            <label for="date-input">Date:</label>
            <input id="date-input" type="date" />
 
            <label for="time-input">Time:</label>
            <input id="time-input" type="time" />
 
            <label for="month-input">Month:</label>
            <input id="month-input" type="month" />
 
            <label for="week-input">Week:</label>
            <input id="week-input" type="week" />
        </form>
    </body>
</html>

Thursday, March 3, 2016

HTML5 Date Input - Caveats