DateRangePicker

Allow users to select a Date and Time value.

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?