Basic
No Default Value
With Range Value
Start Only (Partial Range)
With Buttons
With Min/Max
Cross-Month Range
showDefaultTitle + titleSelectedDatesFormatter
Default Header — Empty (no range selected)
Select Range
Default Header — Complete Range
Select Range
Default Header — Partial Range (start only)
Select Range
Custom Formatter
Trip Dates
formatOptions Applied to Header
Select Dates
startDateLabel / endDateLabel (custom placeholder text)
Custom Labels — Empty State
Flight Dates
Custom Labels — Start Selected Only
Stay Dates
Custom Labels — Complete Range
Date Range
showDefaultButtons — Confirm / Cancel behavior
Confirm Disabled Until Range Complete
Click one day → confirm button stays disabled. Click a second day → confirm enables.
Cancel Resets Partial Range
Click one day to set a start date, then Cancel → selection clears entirely.
Styling API (--range-background + shadow parts)
--range-background CSS Variable
Shadow Parts (range-start, range-end, range-selection)
Combined Styling
highlightedDates
Range Styling Overrides Highlights on Active Days
Highlighted Days Outside the Range Keep Their Styles
Callback-Style highlightedDates + Range