DateValue
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
defaultValue
Type
locale
locale
Type
string
maxValue
maxValue
Type
DateValue
minValue
minValue
Type
DateValue
onChange
onChange
Type
((value: DateValue | null) => void)
timeZone
timeZone
Type
string
value
value
Type
DateValue | null
DatePickerCalendar Props#
DatePickerTimeField Props#
Was this helpful?