HTML Course 9.4 Date and time inputs (date, time, datetime-local, month, week)

Course 9.4: Date and time inputs

HTML5 introduces specialized input types for date and time data. These types offer built-in browser widgets (pickers) and enforce valid formatting. The five main types are:

• date – calendar date (YYYY-MM-DD)
• time – time of day (HH:MM[:SS[.sss]])
• datetime-local – combined date and time (no timezone)
• month – month and year (YYYY-MM)
• week – ISO week date (YYYY-Www)

Common attributes

1. Input type=’date’

Allows the user to pick a calendar date in YYYY-MM-DD format. Browsers show a date picker.

  max='2025-12-31'      
  value='2023-06-15'    
  required              
>

2. Input type=’time’

Captures a time of day. Format is HH:MM or optionally HH:MM:SS with fractional seconds. Default step is 60 seconds.

  step='900'           
  required
>

3. Input type=’datetime-local’

Combines date and time in one field. Uses local timezone (no UTC offset). Format: YYYY-MM-DDThh:mm or including seconds.

4. Input type=’month’

Allows selection of year and month only. Format: YYYY-MM.

  min='2022-01' 
  max='2025-12'
>

5. Input type=’week’

Select an ISO week-year and week number. Format: YYYY-Www (e.g., 2023-W24).

Localization and browser support

• Browsers render native pickers according to user locale.
• Some older browsers fall back to a plain text field.
• Polyfills (e.g., input-polyfill) can enhance support.

Accessibility considerations

• Always pair inputs with a <label for='…'> for screen readers.
• Use aria-describedby or helper text for non-standard requirements.
• Provide min/max so users understand constraints.

Best practices

• Validate on the server side as well as client side.
• Use step to define logical intervals (e.g., 1 day, 15 minutes).
• Provide a clear default value when appropriate.
• Combine date/time inputs with dedicated <fieldset> and <legend> for grouping.