Date Input

<input type="date"> gives users a native calendar picker for choosing a date — no JavaScript date-picker library required.

Syntax

<input type="date" name="dob" min="1950-01-01" max="2015-12-31">

Basic Example

<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">

Browser output: a field showing the locale-formatted date (like DD/MM/YYYY in India), with a small calendar icon that opens a native date-picker popup when clicked.

How It Works

Whatever the visible display format is, the value is always submitted in a fixed, unambiguous format: YYYY-MM-DD. This is what makes it reliable for server-side processing regardless of the visitor's locale or display preferences.

Important Attributes

Real-World Example

<label for="batch-start">Preferred Batch Start Date</label>
<input type="date" id="batch-start" name="batch-start" min="2026-09-01">

Restricting selection to dates on or after a course's next available batch start — the browser itself blocks earlier dates from being chosen at all.

Common Mistakes

• Writing min/max/value in a locale-specific format like 31/12/2026 instead of the required 2026-12-31
• Assuming every browser's native date-picker UI looks identical — appearance genuinely varies by browser and operating system

Best Practices

• Always write date attribute values in YYYY-MM-DD, regardless of how they're displayed to the user
• Set sensible min/max bounds whenever a date field has genuine real-world limits

Accessibility Considerations

The native date picker is keyboard-navigable and screen-reader-friendly out of the box — a genuine accessibility win compared to many custom JavaScript date pickers, which often require significant extra work to reach the same baseline.

SEO Considerations

No direct ranking effect.

Browser & Modern HTML Notes

Native date-picker appearance is intentionally left up to each browser/OS — you can style the surrounding field with CSS, but the popup calendar itself is largely outside your control.

Mini Practice

1. Build a date field restricted to dates within the next 90 days.
2. Explain why min/max must always use YYYY-MM-DD regardless of display locale.

Related HTML Notes

• time-input
• min-max