HTML Date Picker

Imagine trying to type a birthdate or appointment by hand — frustrating, error-prone, and clunky. Thankfully, HTML provides a smooth solution: the <input type="date">. This control opens a browser-native calendar, allowing users to select a valid date effortlessly.

To create a date picker, simply use the type="date" input type.

<label for="birthday">Select your birthday:</label><br>
<input type="date" id="birthday" name="birthday">

Select your birthday: [ 📅  Select Date ]

When the user clicks the input field, a calendar UI pops up (in supporting browsers), allowing intuitive selection.

Use the value attribute to pre-fill the input with a specific date.

<input type="date" name="fruitDate" value="2025-05-24">

[ 2025-05-24 ]

The value must follow the format YYYY-MM-DD. This standard ensures consistency across all browsers and locales.

You can define the earliest and latest selectable dates using min and max attributes.

<input type="date" name="deliveryDate" min="2025-06-01" max="2025-06-30">

[ Select a date between June 1–30, 2025 ]

This is ideal for scheduling deliveries, appointments, or registrations within a fixed timeframe.

<input type="date" name="startDate" required>

If left empty, the form won’t submit until the user picks a valid date. The browser will prompt the user with a native validation message.

• Modern browsers like Chrome, Edge, Safari, and Opera support type="date" with a UI calendar.
• Firefox supports the field but shows a plain text input without a UI (users must type manually unless styled with JS).
• Older browsers may treat it like a text input — always validate on the backend too.

<form action="/submit-delivery" method="post">

  <label for="fruit">Choose a fruit:</label><br>
  <select id="fruit" name="fruit" required>
    <option value="" disabled selected>-- Select -->
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select><br><br>

  <label for="deliveryDate">Preferred Delivery Date:</label><br>
  <input type="date" id="deliveryDate" name="deliveryDate"
          min="2025-06-01" max="2025-06-30" required><br><br>

  <input type="submit" value="Schedule Delivery">

</form>

Choose a fruit: [ Apple ▼ ]
Preferred Delivery Date: [ 📅  Select Date ]
[Schedule Delivery]

• Always use YYYY-MM-DD format for default values
• Set realistic min and max dates to prevent invalid selections
• Combine with required for important fields
• Handle unsupported browsers with fallback messaging or server-side checks

The type="date" input makes selecting valid dates easier, faster, and less error-prone. You’ve learned how to:

• Create a date picker with HTML
• Pre-fill, limit, and validate date entries
• Ensure cross-browser usability

Choose the option that lists all and only the correct statements.

1. Provides a calendar pop-up in supported browsers
2. Can be restricted using min and max
3. Allows multiple date selections at once
4. Returns date values in YYYY-MM-DD format

Choose the option that lists all and only the correct statements.

1. <input type="date" min="2024-01-01" max="2024-12-31">

2. <input type="date" pattern="\d{4}-\d{2}-\d{2}">

3. <input type="date" step="1">

4. <input type="date" range="true">

Next up: Learn how to use the range slider input to collect numeric values with a visual, interactive control.