HTML <input> type="time"

The <input> tag with a type="time" attribute creates an input field that accepts a time value. Inside this field is a clock icon. Clicking this icons opens a time picker.

Example

#

An <input> element of type time>.
Clicking the clock icon opens a time picker. Alternatively, enter the time directly into the field.

Select time

<form action="/tutorial/action.html">
  <fieldset>
    <legend>Select time</legend>

    <input type="time" name="time"><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form> 

Using input type="time"

The <input type="time"> creates an input field for time.

Clicking the clock icon inside the control opens the time picker.

The UI of this control varies from browser to browser. In addition, browser support is spotty.

The time field also accepts manual entry which follows a time format.


Syntax

<input type="time">

Browser support

Here is when type="time" support started for each browser:

Chrome
20.0 Jun 2012
Firefox
57.0 Nov 2017
IE/Edge
12.0 Jul 2015
Opera
10.1 Jun 2009
Safari
Not Supported

You may also like

 Back to <input>
Guides