Date Picker
AI Pass+input#keyboard
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Input component
About Date Picker
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
Features
- Locale-aware weeks make Home and End follow the configured first day of the week.
- Full keyboard grid: arrows move day focus, PageUp/PageDown change month, Shift+PageUp/PageDown change year, Home/End jump to week bounds, Enter selects, Escape closes to the field
role="grid"withgridcellbuttons,aria-selectedstate, and a labelled month heading that announces on change viaaria-live- Typed-date entry parsed inline (
YYYY-MM-DD) with a live-announced error message and no crash on bad input - Minimum and maximum date bounds with disabled days that are visually dimmed and skipped during keyboard navigation
- Today marked with
aria-current="date"and a signal dot; a distinct selected-day fill - Month and year fast-navigation buttons plus a Today and Clear shortcut
- Delegated grid listeners and
esc()-escaped rendering for safe, efficient updates - Smooth transform-based reveal and per-row slide that honor reduced motion
Accessibility
- Grid semantics
- Calendar uses
role="grid", rows userole="row", days arerole="gridcell"buttons witharia-selected - Month heading
#dp-titleisaria-live="polite"and labels the grid viaaria-labelledby- Today
- The current day carries
aria-current="date" - Disabled days
- Out-of-range days set
aria-disabledanddisabledand are skipped by keyboard navigation - Typed errors
- Invalid input sets
aria-invalidand announces via arole="alert"live region wired witharia-describedby - ARIA labels
- Trigger, month, and year nav buttons have descriptive
aria-labelvalues; day buttons expose the full date - Keyboard nav
- Full grid navigation with arrows, Page keys, Home/End, Enter, and Escape
- Reduced motion
prefers-reduced-motion: reducedisables the reveal and slide
Customise it with AI
Open Date Picker in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Color Picker
ReactVanilla
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
#input
Spec Sheet
VanillaReact
Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.
#input#validation#password
Tone Pad
VanillaReact
A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.
#input#slider
Confidence Meter
VanillaReact
A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
#input#slider
Quality Score
VanillaReact
A bare token-driven quality rating input — five ascending bars fill with the brand gradient up to the chosen score, native radio semantics, hover preview, Poor→Excellent hints, and a visible gradient readout backed by a polite live region — themed by the AI Steppers design system.
#input
Floating Field
VanillaReact
A bare token-driven text input with a floating "Agent Name" label that rests inside the field and rises above it on focus or when filled, a design-system focus border, and readable accent label text in light and dark.
#input
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
