DateValue
DatePickerModal
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#
DatePickerModal
: The container component that manages state and context.DatePickerTimeField
: Time field to allow users enter a time.
import { DatePickerModal, 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#
function Page() {const disclosure = useDisclosure()const [value, setValue] = React.useState('')return (<><Button onClick={disclosure.onOpen}>{value ? value.toString() : 'Select a date'}</Button><DatePickerModal {...disclosure} onSubmit={setValue} /></>)}
With time#
function Page() {const disclosure = useDisclosure()const [value, setValue] = React.useState('')return (<><Button onClick={disclosure.onOpen}>{value ? value.toString() : 'Select a date'}</Button><DatePickerModal {...disclosure} onSubmit={setValue}><DatePickerTimeField /></DatePickerModal></>)}
Props#
DatePicker Props#
defaultValue
defaultValue
Type
footer
footer
Description
The modal footer
Type
ReactNode
hideCloseButton
hideCloseButton
Description
Hide the close button
Type
boolean
hideOverlay
hideOverlay
Description
Hide the overlay
Type
boolean
locale
locale
Type
string
maxValue
maxValue
Type
DateValue
minValue
minValue
Type
DateValue
onChange
onChange
Type
((value: DateValue | null) => void)
onSubmit
onSubmit
Type
((date: DateValue | null) => void)
timeZone
timeZone
Type
string
title
title
Description
The modal title
Type
ReactNode
value
value
Type
DateValue | null
DatePickerTimeField Props#
Was this helpful?