Date Picker in HTML Forms - input type='date'

Date Picker in HTML Forms: Selecting Dates Made Simple

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.

Basic Syntax of the Date Picker

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.

Setting Default Dates

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.

Controlling Date Range with min and max

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.

Combining Required Field Validation

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

Browser Support Notes

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

Full Example: Fruit Delivery Form with Date Picker

<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]

Best Practices

• 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

Summary

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

What’s Next?

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