<input type="date"> Types

Since:		HTML5(2014)

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

sample_input_date.html

<!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.

View sample page

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.

Integration with JavaScript

Date input fields can be combined with JavaScript to implement dynamic date restrictions and value retrieval.

<!-- Allow only future dates starting from today -->
<label for="checkin">Check-in Date</label>
<input type="date" id="checkin" name="checkin">

<label for="checkout">Check-out Date</label>
<input type="date" id="checkout" name="checkout">

<script>
  var checkinInput = document.getElementById('checkin');
  var checkoutInput = document.getElementById('checkout');

  // Get today's date in YYYY-MM-DD format and set as min
  var today = new Date().toISOString().split('T')[0];
  checkinInput.min = today;
  checkoutInput.min = today;

  // Update checkout min when check-in date changes
  checkinInput.addEventListener('change', function() {
    checkoutInput.min = checkinInput.value;
    // Reset checkout if it is before check-in
    if (checkoutInput.value < checkinInput.value) {
      checkoutInput.value = '';
    }
  });

  // The date value can be retrieved in YYYY-MM-DD format
  checkinInput.addEventListener('change', function() {
    var parts = checkinInput.value.split('-'); // ["2024", "03", "15"]
    console.log(parts[1] + '/' + parts[2] + '/' + parts[0]); // "03/15/2024"
  });
</script>