Tuesday, March 19, 2024

Exploring HTML5’s New ‘datetime’ Input Types For Your Web Apps

HTML5 introduces a lot of changes to support the new scenarios in which the “Web” is being used. One of the new changes being introduced in HTML5 is the support for date/time as a first class input element type. The introduction of this new input type allows web developers to get the input element’s value as a string which represents date/time.

There are two input types supported for “datetime” like inputs.

1.       The “datetime” input type – is a global date-and-time input control. An input  control with “datetime” input type represents a control whose element’s value represents a global date and time (with timezone information)

2.       The “datetime-local” input type is a local date-and-time input control. An input control with “datetime-local” input type represents a control whose element’s value represents a local date and time (and does not contain timezone information).

 

Both the input types are very similar, the chief difference being that with “datetime” input type, the user agents may display the date and time in a user-appropriate timezone. Both the input types require valid datetime values as part of the value attribute.  Moreover, the “datetime-local” input requires that the date time value should be a valid local datetime value.

The following attributes apply to an input element with “datetime” or “datetime-local” input type.

  • autocomplete – Acceptable values are “on” or “off”.
  • autofocus – Acceptable values are “autofocus”, “” or empty.
  • disabled – Acceptable values are “disabled” or “” or empty.
  • list – Acceptable value is ID of a datalist element in the same document.
  • max – string representing valid datetime/datetime-local
  • min – string representing valid datetime/datetime-local
  • name – string
  • readonly – Acceptable values are “readonly”, “” or empty.
  • required – Acceptable values are “readonly”, “” or empty.
  • step – Acceptable values are “any” or a positive floating point number.

 

Here is a simple web page with datetime and datetime-local input type.

<!DOCTYPE html>

<html>

<body>

    <header>

        <h1>Datetime demo</h1>

        <p>Demo showing datetime and datetime-local types on input element</p>

    </header>

    <footer>

        <h1></h1>

        <p>HTML Goodies</p>

    </footer>

    Datetime example 2

    <input type=”datetime” value=”1990-12-31T23:59:60Z” />

    <br>

    Datetime example 2

    <input type=”datetime” value=”1996-12-19T16:39:57-08:00″ />

    <br>

    Datetime-local example 1

    <input type=”datetime-local” value=”1985-04-12T23:20:50.52″ />

    <br>

    Datetime-local example 2

    <input type=”datetime-local” value=”1996-12-19T16:39:57″ />

</body>

</html>

 

When this page is opened in a modern browser which supports HTMl5, it looks as under

You can see how the datetime-local input type shows up differently in Google Chrome than the datetime input type. (Other browsers like Firefox and IE 11 do not differentiate in rendering between the two input types.

As with other input controls, one can add validation to make the inputs in these fields more restrictive.

As discussed, datetime input types can be used where the control’s value is required to be a value datetime formatted as a string.

 

Summary

In this article, we learned about the new datetime and datetime-local types on the input element in HTML5.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured