The Date & Time Picker (type="datetime-local")

Technical Deep Dive & Specifications

The ISO 8601 YYYY-MM-DDTHH:MM Wire Format

Under the WHATWG specification, values for type="datetime-local" must strictly follow the format:

$$\text{YYYY-MM-DDTHH:MM} \quad \text{or} \quad \text{YYYY-MM-DDTHH:MM:SS}$$

• YYYY-MM-DD: Standard ISO 8601 calendar date.
• T: The mandatory literal capital letter delimiter separating the date and time segments.
• HH:MM: 24-hour time representation (00:00 through 23:59).
• :SS: Optional seconds segment (enabled via step="1").

<!-- CORRECT: Standard Date & Time -->
<input type="datetime-local" value="2026-08-21T14:30">

<!-- CORRECT: Precision Date & Time with Seconds (step="1") -->
<input type="datetime-local" value="2026-08-21T14:30:45" step="1">

<!-- INCORRECT: Silently rejected and discarded by browser -->
<input type="datetime-local" value="2026-08-21 14:30"> <!-- Space instead of T -->
<input type="datetime-local" value="2026-08-21T14:30Z"> <!-- 'Z' timezone is forbidden -->
<input type="datetime-local" value="08/21/2026 2:30 PM">

Why type="datetime" Was Deprecated

In the early draft of HTML5, there was a proposed <input type="datetime"> (which expected a full UTC string with Z or timezone offsets). It was deprecated and permanently removed from browser engines because:

1. Users do not think in UTC when scheduling local appointments (e.g., booking a dentist visit at 10:00 AM).
2. Forcing browsers to handle realtime geolocation and daylight saving timezone conversions inside a basic HTML input created intractable edge cases.
3. The modern standard relies on <input type="datetime-local"> to collect local time, delegating timezone resolution to JavaScript and backend servers.

Converting Local Strings to UTC in JavaScript

Because input.value yields a local string without timezone offset (e.g. "2026-08-21T09:00"), you must normalize it to UTC before saving to a database:

const dtInput = document.querySelector('input[type="datetime-local"]');

// 1. Parsing as a local date instance
const localDate = new Date(dtInput.value);

// 2. Converting to strict UTC ISO 8601 string for backend API submission
const utcString = localDate.toISOString();
console.log(utcString); // "2026-08-21T16:00:00.000Z" (if in PDT UTC-7)

Helper: Initializing datetime-local to Current Local Time

Generating the current local ISO timestamp for the value or min attribute:

function getLocalISOString(date = new Date()) {
  const offset = date.getTimezoneOffset() * 60000;
  const localDate = new Date(date.getTime() - offset);
  return localDate.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:MM"
}

// Set default value to now
dtInput.value = getLocalISOString();
// Set minimum constraint to now (cannot select the past)
dtInput.min = getLocalISOString();

Compound Boundary Constraints

<label for="event-time">Conference Session Time:</label>
<input 
  type="datetime-local" 
  id="event-time" 
  name="event_time"
  min="2026-09-01T08:00" 
  max="2026-09-03T18:00"
  step="1800"
  required
>

• Restricts selection strictly between September 1st, 8:00 AM and September 3rd, 6:00 PM.
• step="1800" locks time selection to 30-minute intervals.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 117–125: The <input type="datetime-local"> combines both date calendar and time clock selection into a single native control.
• Lines 128–129: Includes hidden inputs (<input type="hidden">) for user_timezone and broadcast_utc, ensuring the backend server receives both the exact UTC timestamp and the user's IANA regional timezone identifier.
• Lines 149–153: Uses Intl.DateTimeFormat().resolvedOptions().timeZone to detect the user's regional timezone (e.g., America/New_York or Europe/Paris) without external IP lookup APIs.
• Lines 163–172: Listens for the input event on the date-time control and automatically serializes the local selection into UTC format (toISOString()).

Expected Browser Render Output

+-------------------------------------------------------------+
| Schedule Live Keynote                                       |
| Broadcast synchronization and UTC normalization             |
|                                                             |
| Keynote Start Date & Time *                                 |
| [ 2026-08-22 10:00                                     📅 ] |
|                                                             |
| +---------------------------------------------------------+ |
| | NORMALIZED SERVER PAYLOAD (UTC)                         | |
| | 2026-08-22T17:00:00.000Z                                | |
| | Your Detected Local Timezone: America/Los_Angeles       | |
| +---------------------------------------------------------+ |
|                                                             |
| [               Schedule Global Keynote                   ] |
+-------------------------------------------------------------+