FORMS · FORM ELEMENTS

Date Pickers

Date, range, time, month and year. Real dates (today is Sun, 18 Oct 2026), keyboard grid, natural-language input, rules and time zones.
THEME
DENSITY
01

Playground

Type, view, format, week start, rules, state — live
PREVIEWLive · Fri, 30 Oct 2026
Type a date or “next fri”
ACCESSIBILITY TREE
roletextbox + button → dialog → grid
name"Due date"
valueFri, 30 Oct 2026
month—
statesmin today
Settings
TYPE
VIEW
WEEK STARTS
FORMAT
STATE
value (ISO)2026-10-30
CODE
<DatePicker type="date" format="d MMM yyyy" weekStartsOn={1} min="2026-10-18" value="2026-10-30"/>
02

Variants

8 pickers, all working
Single datetype “tomorrow”, “next fri”, “23/10”
Type a date or a phrase — Enter accepts the suggestion
Date rangetwo months · hover preview · presets
MOTUWETHFRSASU
MOTUWETHFRSASU
Wed, 28 Oct 2026 – Wed, 4 Nov 20268 days · 7 nights · 6 working days
Date + time15-min slots · 12/24 h · time zone
MOTUWETHFRSASU
stored2026-10-29T15:00:00+01:00
Thu, 29 Oct 2026 · 15:00 CET
Month & yearreports · card expiry
Report month
Founded in
Report: September 2026 · Studio founded 2019 (7 years)
Timescroll columns or type it
Hour
Minute
2:30 pm · stored as 14:30
Multiple datesstudio closed days
MOTUWETHFRSASU
2 days closed · 30 Oct, 6 Nov
Inline with eventsdots · week numbers · agenda
WKMOTUWETHFRSASU
40
41
42
43
44
45
SUN, 18 OCT 2026Nothing scheduled
Native<input type="date"> · OS picker on phones
value2026-10-30T15:00
Best for mobile-first forms. You can’t style the popup, and the display format follows the OS locale.
03

States

Day cells and the field
DAY CELLS
Default
Hover
Today
Selected
Range start
In range
Range end
Unavailable
Other month
Has events
FIELD
DEFAULT
FOCUS
OPEN
ERROR
DISABLED
READ-ONLY
04

Behavior

Keyboard, validation, time zones
KeyboardWAI-ARIA date grid pattern
MOTUWETHFRSASU
← →Previous / next day↑ ↓Same day last / next weekPgUp PgDnPrevious / next month⇧ PgUpPrevious yearHome EndStart / end of weekEnterSelect the focused dayEscClose the popoverTabLeave the grid
KEY LOGClick a day, then use the keys.
Validationpast · weekends · booked · max 60 days
MOTUWETHFRSASU
18Today28Booked — hover for the reason31Weekend — closed17Past — not allowed
Click any day — unavailable ones explain why instead of doing nothing
Time zonesone meeting, three cities
Time in Berlin
BerlinCET · UTC+01:00
15:00Thu, 29 Oct
New YorkEDT · UTC−04:00
10:00Thu, 29 Oct
TokyoJST · UTC+09:00
23:00Thu, 29 Oct
Stored once in UTC: 2026-10-29T14:00:00Z
05

In Avava

Project schedule, report period, client call
New project · schedulestart → deadline · working days
Weekdays only
Must be after kickoff
30
working daysMon, 26 Oct 2026 → Fri, 4 Dec 2026 · 6 weeks
Revenue report · periodpresets · custom · compare
REVENUE$55,200+12.4% vs prev.
INVOICES27+3 vs prev.
AVG. INVOICE$2,044−2.1% vs prev.
Sat, 19 Sep 2026 – Sun, 18 Oct 2026 · 30 days · vs Thu, 20 Aug 2026 – Fri, 18 Sep 2026
Book a client calldate · free slots · duration
MOTUWETHFRSASU
Thu, 29 Oct 2026 · 15:00–15:45 CET · with Ben Costa
06

Rules & a11y

When to use a calendar, formats, screen readers
Calendar or typing?distance from today decides
Near future (bookings, deadlines)
Calendar popoverContext of weekdays matters
Far past (birthday, founded)
Typing or year → month → dayNever make people click back 40 years
A span of days
Two-month range + presetsReports, campaigns, leave
Known exact date
Text input with parsing“next fri”, “23/10” — fastest
Mobile, plain date
Native inputOS wheel or sheet for free
Formats & storageshow local, store ISO
DisplaySun, 18 Oct 2026
US locale10/18/2026
Store date2026-10-18
Store range2026-10-28/2026-11-04
Store time2026-10-29T13:00:00Z
Never store18/10 or “next fri”
Screen readersgrid pattern, announced month
✓role="grid" · rows · gridcellOne Tab stop; arrows, PgUp/PgDn, Home/End move inside
✓aria-current="date"Today is announced; selected days use aria-selected
✓aria-disabled + title reasonUnavailable days stay focusable and say why
✓Month title in aria-live“November 2026” is read when the month changes
✓Text input stays usableThe calendar is a helper, never the only way in
✓Esc closes, focus returnsBack to the input that opened it
DO✓Let people type a date — and understand “next fri”✓Show why a day is unavailable✓Store ISO dates and UTC times; format only on display✓Respect the locale for week start and date order✓Offer presets for ranges people pick every week
DON’T✕Force a calendar for a birth date✕Silently ignore clicks on disabled days✕Show ambiguous formats like 03/04 without a hint✕Forget time zones for calls with clients abroad✕Close the range picker after the first click