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?