DatePicker

Allow users to select a Date and Time value.

The DatePicker is currently in beta, we'd love to hear your feedback while we finalize the API.

Import#

DatePicker: The container component that manages state and context.
DatePickerTrigger: Wrapper that toggles the DatePickerDialog visibility.
DatePickerDialog: The date picker content.
DatePickerCalendar: Calender showing available months and days.
DatePickerTimeField: Time field to allow users enter a time.

import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
  DatePickerTimeField,
} from '@saas-ui/date-picker'

Usage#

The DatePicker uses @internationalized/date to represent and manipulate dates. Check out the documentation to learn how to work with Date objects.

In case you run into build issue with Next.js add the following line to next.config.js.

transpilePackages: ['@saas-ui/date-picker'],

Basic#

<DatePicker>
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
  </DatePickerDialog>
</DatePicker>

With time#

<DatePicker granularity="minute">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

Locale#

<DatePicker granularity="minute" locale="nl-NL">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

With 24 hour time#

<DatePicker hourCycle="24" granularity="minute">
  <DatePickerTrigger>
    <Button>Open DatePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DatePickerCalendar />
    <DatePickerTimeField />
  </DatePickerDialog>
</DatePicker>

Controlled#

function ControlledPicker() {
  const [value, setValue] = React.useState(today(getLocalTimeZone()))

  return (
    <DatePicker value={value} onChange={setValue}>
      <DatePickerTrigger>
        <Button>{value.toString()}</Button>
      </DatePickerTrigger>
      <DatePickerDialog>
        <DatePickerCalendar />
      </DatePickerDialog>
    </DatePicker>
  )
}

Controlled with zoned time#

function ControlledPicker() {
  const [value, setValue] = React.useState(now(getLocalTimeZone()))

  return (
    <DatePicker value={value} onChange={setValue} granularity="minute">
      <DatePickerTrigger>
        <Button>{value.toString()}</Button>
      </DatePickerTrigger>
      <DatePickerDialog>
        <DatePickerCalendar />
        <DatePickerTimeField />
      </DatePickerDialog>
    </DatePicker>
  )
}

Was this helpful?