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

DatePickerStatic: The container component that manages state and context.
DatePickerCalendar: Calender showing available months and days.
DatePickerTimeField: Time field to allow users enter a time.

import {
  DatePickerStatic,
  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.

Basic

<DatePickerStatic>
  <DatePickerCalendar />
</DatePickerStatic>

With time

<DatePickerStatic granularity="minute">
  <DatePickerCalendar />
  <DatePickerTimeField />
</DatePickerStatic>

With 24 hour time

<DatePickerStatic hourCycle="24" granularity="minute">
  <DatePickerCalendar />
  <DatePickerTimeField />
</DatePickerStatic>

Controlled

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

  return (
    <DatePickerStatic value={value} onChange={setValue}>
      <DatePickerCalendar />
    </DatePickerStatic>
  )
}

Controlled with zoned time

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

  return (
    <DatePickerStatic value={value} onChange={setValue} granularity="minute">
      <DatePickerCalendar />
      <DatePickerTimeField />
    </DatePickerStatic>
  )
}

Was this helpful?