Smart Date Picker
Beta wall-clock date/time picker with atomic Apply, truthful IANA timezone conversion, DST resolution, recurring single dates and ranges, availability, and occurrence-aware conflicts.
Default
Single date with staged Apply, time, natural language, recurrence, and availability.
Selected: 2026-07-29 at 10:00 (Europe/London)
Sign in to view this example's source code.
Sign inRange
Mode-safe range selection that excludes unavailable days.
Click start, then end. Unavailable days are disabled.
Sign in to view this example's source code.
Sign inScheduling
Booking scenario: DST-safe timezone conversion, recurrence, custom parsing, and occurrence-aware conflicts.
Try “team standup”, “every Monday for the next 3 weeks”, or an ordinal monthly schedule.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | Single date/time or start–end range selection |
| value / defaultValue / onChange | SmartDatePickerValue<mode> | uncontrolled if omitted | Atomic selection, IANA timezone, recurrence, and DST policy; emits only on Apply |
| timeZoneChangeBehavior | "ask" | "preserve-instant" | "preserve-wall-time" | "ask" | Controls whether changing timezone converts the exact moment or reinterprets wall time |
| showRecurrence | boolean | true in single mode; false in range mode | Daily, weekly, calendar/ordinal monthly, and yearly recurrence editor |
| availability | AvailabilityDay[] | [] | Per-day availability and load overlay on the calendar grid |
| conflictCheck / conflicts | ConflictCheck / ScheduleConflict[] | undefined / [] | Bounded exact-time occurrence checks plus optional external conflict messages |
| presets | SmartDatePickerPreset[] | Today, Tomorrow, Next week, Next 7 days | Quick scheduling chips |
| onParseNaturalLanguage | (input: string) => ParseResult | Promise<ParseResult> | built-in heuristic parser | Swap in your own NLP/LLM parser for AI-friendly input |
| onApply | (snapshot: SmartDatePickerValue) => void | undefined | Called with the same immutable atomic value as onChange after Apply |
| showTime / showTimezone / showRecurrence | boolean | true | Toggle schedule tab sections |
| weekStartsOn | 0 | 1 | 1 (Monday) | Calendar week start |