DateRangePicker

An input for selecting a range of dates from a calendar popout. The first click sets the start of the range and the second sets its end; clicking a date before the start begins a new range there.

Structure

<DateRangePicker>
	<DateRangePickerTrigger />
	<DateRangePickerContent />
</DateRangePicker>

With no children, the trigger and content are rendered automatically. Compose them explicitly to target each one with its own props and styling.

Demo