Draft UI

Date Range Picker

A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

Installation

bash
npx @sly-cli/sly add draft-ui date-range-picker

Examples

Default

This is the default DateRangePicker

Date Range

Disabled

Use the isDisabled prop to disable the entire DateRangePicker including the DateInput's.

Date Range