DateRangePicker
Allow users to select a Date and Time value.
- Beta
Source
Theme source
@saas-ui/date-picker
- 2.8.9 (latest)
The DateRangePicker is currently in beta, we'd love to hear your feedback while we finalize the API.
Import
DateRangePicker
: The container component that manages state and context.DateRangePickerCalendar
: Calender showing available months and days.DateRangePickerTimeField
: Time field to allow users enter a time.DatePickerTrigger
: Wrapper that toggles the DatePickerDialog visibility.DatePickerDialog
: The date picker content.
import {DateRangePicker,DateRangePickerCalendar,DateRangePickerTimeField,DateRangeTrigger,DateRangeDialog,} from '@saas-ui/date-picker'
Usage
The DateRangePicker uses @internationalized/date to represent and manipulate dates. Check out the documentation to learn how to work with Date objects.
Basic
<DateRangePicker><DatePickerTrigger><Button>Open DateRangePicker</Button></DatePickerTrigger><DatePickerDialog><DateRangePickerCalendar /></DatePickerDialog></DateRangePicker>
With time
<DateRangePicker granularity="minute"><DatePickerTrigger><Button>Open DateRangePicker</Button></DatePickerTrigger><DatePickerDialog><DateRangePickerCalendar /><DateRangePickerTimeField /></DatePickerDialog></DateRangePicker>
With 24 hour time
<DateRangePicker hourCycle="24" granularity="minute"><DatePickerTrigger><Button>Open DateRangePicker</Button></DatePickerTrigger><DatePickerDialog><DateRangePickerCalendar /><DateRangePickerTimeField /></DatePickerDialog></DateRangePicker>
Controlled
function ControlledPicker() {const [value, setValue] = React.useState({start: today(getLocalTimeZone()),end: null,})const start = value.start ? value.start.toString() : ''const end = value.end ? value.end.toString() : ''return (<DateRangePicker value={value} onChange={setValue}><DatePickerTrigger><Button>{start + ' - ' + end}</Button></DatePickerTrigger><DatePickerDialog><DateRangePickerCalendar /></DatePickerDialog></DateRangePicker>)}
Controlled with time
function ControlledPicker() {const [value, setValue] = React.useState(now(getLocalTimeZone()))const start = value.start ? value.start.toString() : ''const end = value.end ? value.end.toString() : ''return (<DateRangePicker value={value} onChange={setValue} granularity="minute"><DatePickerTrigger><Button>{start + ' - ' + end}</Button></DatePickerTrigger><DatePickerDialog><DateRangePickerCalendar /><DateRangePickerTimeField /></DatePickerDialog></DateRangePicker>)}
Was this helpful?