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 width="full" />
</DatePickerModal>
</>
)
}

Was this helpful?