<input type="time">

<input> elements of type time create input fields allowing a time to be easily entered.

The control's UI varies in general from browser to browser; cross-browser support is generally good in modern browsers, with only Safari not supporting it at the time of writing. In Safari, the control degrades gracefully to a simple <input type="text">.

<input id="time" type="time">

In Chrome/Opera the time control is simple, with slots to enter hours and minutes (24 hour clock), and up and down arrow to iterate the values shown, and a cross button to empty the control.

Firefox's time control is very similar, except that it doesn't have the up and down arrows and it is a 12 hour clock (with an additional slot to specify AM or PM).

The Edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels (also 24 hour):

Value A DOMString representing a time, or empty.
Events change and input.
Supported Common Attributes autocomplete, list, readonly, and step.
IDL attributes value, valueAsDate, valueAsNumber, list.
Methods select(), stepDown(), stepUp().

Value

A DOMString representing the value of the time entered into the input. You can set a default value for the input by including a date inside the value attribute, like so:

<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30">

One thing to note is that the displayed time format may differ from the actual value — the displayed time format will be chosen based on the set locale of the user's operating system, whereas the date value is always formatted hh:mm. When the above value submitted to the server, for example, some browsers display it as 13:30, some display it as 1.30 PM, but the submitted value will always look like appt-time=13%3A30.

You can also get and set the date value in JavaScript using the HTMLInputElement.value property, for example:

var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

Using time inputs

Time inputs sound convenient at first glance — they provide an easy UI for choosing times, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <input type="time"> because browser support is not guaranteed across all browsers.

We'll look at basic and more complex uses of <input type="time">, then offer advice on mitigating the browser support issue later on (see Handling browser support).

Basic uses of time

The simplest use of <input type="time"> involves a basic <input> and <label> element combination, as seen below:

<form>
  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" type="time" name="appt-time">
</form>

Controlling input size

<input type="time"> doesn't support form sizing attributes such as size. You'll have to resort to CSS for sizing needs.

Using the step attribute

You can use the step attribute to vary the amount of time jumped whenever the time is incremented. This does however have some strange effects across browsers, so is not completely reliable.

It takes an integer value that equates to the number of seconds you want to increment by. If you choose a value of less than 60 seconds (1 minute), it causes the time input to show a seconds input area alongside the hours and minutes:

<form>
  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" type="time" name="appt-time" step="2">
</form>

However, this only seems to have a predictable effect in Chrome/Opera, which are the only browsers to show up/down iteration arrows — clicking these will cause the seconds value to be iterated by two seconds per time, but will have no effect on the hours or minutes (If you want to iterate the minutes or hours, you need an appropriate multiple of seconds equivalent to those values, e.g. 120 for 2 minutes, or 7200 for 2 hours.)

The steps value seems to have no effect in Firefox or Edge. In addition, it seems to cause validation to not work properly (as seen in the next section).

Validation

By default, <input type="time"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a datetime — which is helpful — but you can still not fill in a datetime and submit, or enter an invalid datetime (e.g. the 32th of April).

Setting maximum and minimum times

You can use the min and max attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of 12:00 and a maximum time of 18:00:

<form>
  <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
  <input id="appt-time" type="time" name="appt-time"
         min="12:00" max="18:00">
  <span class="validity"></span>
</form>

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

The result here is that:

  • Only times between 12:00 and 18:00 will be seen as valid — times outside that range will come up as invalid.
  • Depending on what browser you are using, you might find that times outside the specified values might not even be selectable in the time picker (e.g. Edge).

Making times required

In addition you can use the required attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty date field.

Let's look at an example — here we've set minimum and maximum times, and also made the field required:

<form>
  <div>
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required>
    <span class="validity"></span> </form>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here's'a screenshot for those of you who aren't using a supporting browser:

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

Handling browser support

As mentioned above, the major problem with using time inputs at the time of writing is browser support — Safari doesn't support it on desktop, and old versions of IE don't support it.

Mobile platforms such as Android and iOS make really good use of such input types, providing specialist UI controls that make it really easy to select values in a touchscrene environment. For example, the time picker on Chrome for Android looks like this:

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the most serious — as we mentioned earlier, with a time input the actual value is always normalized to the format hh:mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write times, for example:

  • 3.00 pm
  • 3:00pm
  • 15:00
  • 3 o'clock in the afternoon
  • etc.

One way around this is to put a pattern attribute on your month input. Even though the month input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

<form>
  <div>
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required
           pattern="[0-9]{2}:[0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern nn:nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

And what user is going to understand the pattern they need to enter the time and date in?

We still have a problem.

The best way to deal with times in forms in a cross-browser way at the moment is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

Examples

In this example we create two sets of UI elements for choosing times — a native picker created with <input type="time">, and a set of two <select> elements for choosing hours/minutes in older browsers that don't support the native input.

The HTML looks like so:

<form>
  <div class="nativeTimePicker">
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
      <input id="appt-time" type="time" name="appt-time"
             min="12:00" max="18:00" required>
      <span class="validity"></span>
    </div>
  <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <label for="hour">Hour:</label>
        <select id="hour" name="hour">
        </select>
      </span>
      <span>
        <label for="minute">Minute:</label>
        <select id="minute" name="minute">
        </select>
      </span>
    </div>
  </div>
</form>

The hour and minutes values are dynamically generated.

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="time">, we create a new <input> element, set its type to time, then immediately check what its type is set to — non-supporting browsers will return text, because the time type falls back to type text. If <input type="time"> is not supported, we hide the native picker and show the fallback picker UI (<select>s) instead.

// define variables
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'time';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the hours and minutes dynamically
  populateHours();
  populateMinutes();
}

function populateHours() {
  // populate the hours <select> with the 6 open hours of the day
  for(var i = 12; i <= 18; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes <select> with the 60 hours of each minute
  for(var i = 0; i <= 59; i++) {
    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    minuteSelect.appendChild(option);
  }
}

// make it so that if the hour is 18, the minutes value is set to 00
// — you can't select times past 18:00
 function setMinutesToZero() {
   if(hourSelect.value === '18') {
     minuteSelect.value = '00';
   }
 }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;

Specifications

Specification Status Comments
HTML Living Standard
The definition of '<input type="time">' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20 12 (Yes) No support 10.62 No support
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) ? (Yes) (Yes)

See also

Document Tags and Contributors

 Contributors to this page: zacharydenton, chrisdavidmills
 Last updated by: zacharydenton,