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>

<DatePickerStatic>
  <DatePickerCalendar />
</DatePickerStatic>

Live edit

With time#

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

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

Live edit

With 24 hour time#

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

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

Live edit

Controlled#

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


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

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

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

Live edit

Controlled with zoned time#

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


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

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

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

Live edit

Was this helpful?