<input type="date"> Types

HTML5 introduced dedicated input types for date and time entry. In addition to type="date", controls for selecting time, date-time, month, and week are available.

Syntax

<!-- Date (year/month/day) -->
<input type="date" name="birthday">

<!-- Time (hours:minutes) -->
<input type="time" name="start_time">

<!-- Date and time (date + time) -->
<input type="datetime-local" name="meeting">

<!-- Month (year/month) -->
<input type="month" name="birth_month">

<!-- Week (year/week number) -->
<input type="week" name="target_week">

Type List

type attribute value	Description
type="date"	Displays a calendar picker for selecting year, month, and day. The submitted value format is `YYYY-MM-DD`.
type="time"	Provides a control for selecting hours and minutes (and optionally seconds). The submitted value format is `HH:MM`.
type="datetime-local"	Allows selecting both date and time together. The submitted value format is `YYYY-MM-DDTHH:MM`.
type="month"	Selects a year and month. The submitted value format is `YYYY-MM`.
type="week"	Selects a year and week number. The submitted value format is `YYYY-W[week number]`.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Date Input Types</title>
</head>
<body>

  <form>
    <!-- Date (with range restriction) -->
    <p>
      <label for="bday">Date of birth:</label>
      <input type="date" id="bday" name="birthday"
        min="1900-01-01" max="2025-12-31">
    </p>

    <!-- Time (step=1800 hides seconds, 30-minute intervals) -->
    <p>
      <label for="appoint">Appointment time:</label>
      <input type="time" id="appoint" name="time"
        min="09:00" max="18:00" step="1800">
    </p>

    <!-- Date and time (with default value) -->
    <p>
      <label for="meet">Meeting date and time:</label>
      <input type="datetime-local" id="meet" name="meeting"
        value="2025-06-01T10:00">
    </p>

    <!-- Month (service start month) -->
    <p>
      <label for="start">Service start month:</label>
      <input type="month" id="start" name="start_month"
        min="2025-01">
    </p>

    <p><button type="submit">Book</button></p>
  </form>

</body>
</html>

Result

Each input field displays a dedicated picker UI. The "Appointment time" field allows selection in 30-minute increments between 9:00 and 18:00, and the "Meeting date and time" field defaults to June 1, 2025 at 10:00.

HTML Rendering Preview

Overview

Using date-related input types causes the browser to automatically display a dedicated calendar UI or time picker. Users can select accurate dates without manual entry, which also prevents formatting errors. You can restrict the selectable range using the min and max attributes.

Date-related input types render differently depending on the browser and OS. In particular, type="week" may not be supported in Safari (it falls back to a plain text input). For important forms, consider handling unsupported browsers.

The step attribute controls the selection interval. Setting step="1800" (in seconds) on type="time" gives 30-minute increments. All values submitted from the form are strings following the international standard (ISO 8601). Convert them to your preferred display format on the server side.