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?