typestar

Dates and times in HTML

Five input types the browser already knows how to render a picker for.

<label for="day">Date</label>
<input type="date" id="day" name="day" min="2026-01-01"
       max="2026-12-31">

<label for="slot">Time</label>
<input type="time" id="slot" name="slot" step="900">

<label for="when">Date and time</label>
<input type="datetime-local" id="when" name="when">

<label for="cycle">Month</label>
<input type="month" id="cycle" name="cycle">

How it works

  1. Each type has its own value format; date is always YYYY-MM-DD.
  2. min and max take a value in that same format.
  3. week and month exist too, and are the least widely supported.

The run, in numbers

Lines
12
Characters to type
360
Tokens
101
Three-star pace
70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 87 seconds.

Type this snippet

Step 2 of 4 in Numbers, dates & files, step 16 of 25 in Forms & inputs.

← Previous Next →

Dates and times in other languages