Smart Date Picker

Premium date/time picker with calendar, ranges, timezone, natural-language parsing, recurrence rules, availability overlays, and conflict hints for scheduling flows.

Default

Single date with time, presets, natural language, and availability overlay.

Selected: Fri Jun 12 2026 at 10:00

Range

Two-click range selection with unavailable days disabled.

Click start, then end. Unavailable days are disabled.

Scheduling

Booking scenario: timezone, weekly recurrence, custom parser, conflict detection.

Try “team standup” for the custom parser, “every Monday for the next 3 weeks”, or pick a day that overlaps demo blocked slots (days +2 and +5) to see conflict detection.

Props

Name	Type	Default	Description
mode	"single" \| "range"	"single"	Single date/time or start–end range selection
value / onChange	DateTimeSelection \| DateRangeSelection \| null	uncontrolled if omitted	Controlled selection state
timezone / onTimezoneChange	string	browser timezone	IANA timezone for display and scheduling context
recurrence / onRecurrenceChange	RecurrenceRule	none	Repeat rule builder (daily/weekly/monthly/yearly)
availability	AvailabilityDay[]	[]	Per-day availability and load overlay on the calendar grid
conflicts	ScheduleConflict[]	[]	External conflict messages shown in the footer
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
onQuickSchedule	(selection) => void	undefined	Called when Apply is pressed with a valid selection
showTime / showTimezone / showRecurrence	boolean	true	Toggle schedule tab sections
weekStartsOn	0 \| 1	1 (Monday)	Calendar week start