DatePicker
Allow users to select a Date and Time value.
- Beta
Source
Theme source
@saas-ui/date-picker
- 2.8.9 (latest)
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?