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>
  )
}

Props#

DatePicker Props#

defaultValue

Type
DateValue

locale

Type
string

maxValue

Type
DateValue

minValue

Type
DateValue

onChange

Type
((value: DateValue | null) => void)

timeZone

Type
string

value

Type
DateValue | null

DatePickerCalendar Props#

DatePickerTimeField Props#

Was this helpful?