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

Type
DateValue

footer

Description

The modal footer

Type
ReactNode

hideCloseButton

Description

Hide the close button

Type
boolean

hideOverlay

Description

Hide the overlay

Type
boolean

locale

Type
string

maxValue

Type
DateValue

minValue

Type
DateValue

onChange

Type
((value: DateValue | null) => void)

onSubmit

Type
((date: DateValue | null) => void)

timeZone

Type
string

title

Description

The modal title

Type
ReactNode

value

Type
DateValue | null

DatePickerTimeField Props#

Was this helpful?