<label for="date">Select a date</label>
<input type="date" id="date">Datepicker
Native <input type="date"> element. Zero JavaScript, fully accessible, keyboard navigable — the browser provides the date picker UI.
Single Date
Date Range
<label for="start">Start</label>
<input type="date" id="start">
<label for="end">End</label>
<input type="date" id="end">With Constraints
<!-- min / max constrain selectable dates -->
<input type="date" min="2024-01-01" max="2024-12-31">Other Date/Time Types
| Input type | What it shows | Example |
|---|---|---|
date | Day / Month / Year | <input type="date"> |
time | Hours / Minutes | <input type="time"> |
datetime-local | Date + time combined | <input type="datetime-local"> |
month | Month / Year only | <input type="month"> |
week | Week number / Year | <input type="week"> |
Accessibility
- Always include a
<label>— placeholder is not a label - Native
<input type="date">is fully keyboard accessible in all modern browsers - Use
minandmaxto constrain dates — don't rely on JS validation alone - Add
autocomplete="bday"or similar to help password managers and users
Features
- Semantic Structure - Built with native HTML5 elements for maximum reliability.
- Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
- Fully Responsive - Scales perfectly from mobile to desktop screens.
- No JS Dependency - Core functionality relies on pure CSS for maximum performance.
- Customizable - Easily extendable via Axiom01's design tokens and modifiers.
Use Cases
The Datepicker component is designed for versatile implementation across modern web applications. Ideal scenarios include:
- Dashboards & Admin Panels - Structured data presentation and interface control.
- Content Management Systems - Organizing complex information hierarchies and media.
- E-Commerce Platforms - Enhancing product discovery and user workflows.
- Marketing Sites - Highlighting key product offerings cleanly and effectively.
- SaaS Applications - Delivering native-feeling, responsive app experiences.