What is the datetime-local input type in HTML5?

The datetime-local input type is used to allow users to select dates and times that do not contain time zone information. The value is returned in YYYY-MM-DDThh:mm format; 1. It does not process time zones, but only represents local time; 2. It is widely supported in modern browsers, but Safari did not support it for a long time before; 3. The input range and step size can be limited by min, max and step attributes; 4. When not supported, it will be downgraded to a text box, and compatibility processing should be paid attention to; 5. It is suitable for scenarios such as appointments and event schedules that only require local time. It is recommended to use it in conjunction with labels and verification to ensure the input is correct.

The datetime-local input type in HTML5 is used to let users select a date and time without including timezone information. It provides a convenient, standardized way for users to enter both a date and time through a browser-native interface, such as a calendar picker and time selector.

You define it in an HTML form like this:

 <input type="datetime-local" name="event-time">

Key Features

• No time zone handling : Unlike datetime (which is deprecated), datetime-local does not include timezone data. The value is interpreted as local time.
• Format : The value is always returned in the format YYYY-MM-DDThh:mm (eg, 2025-04-05T14:30 ). The T separates the date and time, as per ISO 8601.
• Browser support : Widely supported in modern browsers (Chrome, Edge, Firefox, Opera), but not in Safari until recently (Safari added support in version 14.1).
• Placeholder and labels : Since the input doesn't show a label inside the field, it's good practice to use a <label> or provide instructions so users know what to enter.

Common Attributes

You can use attributes like min , max , and step to control the allowed values:

 <input 
  type="datetime-local" 
  name="booking-time"
  min="2025-01-01T00:00"
  max="2025-12-31T23:59"
  step="300">

• min and max restrict the selectable date/time range.
• step controls the increment (in seconds). step="300" means 5-minute intervals.

Limitations

• If a browser doesn't support datetime-local , it falls back to a text input, which can lead to inconsistent user input.
• For full cross-browser compatibility, especially with older or mobile browsers, developers often use JavaScript libraries or separate date and time inputs.

When to Use It

• Booking systems
• Event scheduling
• Forms where local date/time input is needed and timezone is handled separately or not relevant

In short, datetime-local is a clean, semantic way to collect date and time input in local time, with built-in UI in most browsers. Just be mindful of fallbacks and validation for unsupported environments.

The above is the detailed content of What is the datetime-local input type in HTML5?. For more information, please follow other related articles on the PHP Chinese website!