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#

DatePicker: The container component that manages state and context.
DatePickerTrigger: Wrapper that toggles the DatePickerDialog visibility.
DatePickerDialog: The date picker content.
DatePickerCalendar: Calender showing available months and days.
DatePickerTimeField: Time field to allow users enter a time.

import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  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.

In case you run into build issue with Next.js add the following line to next.config.js.

transpilePackages: ['@saas-ui/date-picker'],

Basic#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
} from '@saas-ui/date-picker'

export default function Page() {
  return (
    <Flex justifyContent="center">
      <DatePicker defaultIsOpen>
        <DatePickerTrigger>
          <Button>Open DatePicker</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

With time#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
  DatePickerTimeField,
} from '@saas-ui/date-picker'

export default function Page() {
  return (
    <Flex justifyContent="center">
      <DatePicker defaultIsOpen closeOnBlur={false}>
        <DatePickerTrigger>
          <Button>Open DatePicker</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
          <DatePickerTimeField />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

Locale#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
  DatePickerTimeField,
} from '@saas-ui/date-picker'

export default function Page() {
  return (
    <Flex justifyContent="center">
      <DatePicker
        defaultIsOpen
        closeOnBlur={false}
        granularity="minute"
        locale="nl-NL"
      >
        <DatePickerTrigger>
          <Button>Open DatePicker</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
          <DatePickerTimeField />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

With 24 hour time#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
  DatePickerTimeField,
} from '@saas-ui/date-picker'

export default function Page() {
  return (
    <Flex justifyContent="center">
      <DatePicker
        defaultIsOpen
        closeOnBlur={false}
        hourCycle="24"
        granularity="minute"
      >
        <DatePickerTrigger>
          <Button>Open DatePicker</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
          <DatePickerTimeField />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

Controlled#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
} from '@saas-ui/date-picker'
import { today, now, getLocalTimeZone } from '@internationalized/date'

export default function ControlledPicker() {
  const [value, setValue] = React.useState(today(getLocalTimeZone()))

  return (
    <Flex justifyContent="center">
      <DatePicker
        defaultIsOpen
        closeOnBlur={false}
        value={value}
        onChange={setValue}
      >
        <DatePickerTrigger>
          <Button>{value.toString()}</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

Controlled with zoned time#

import { Flex, Button } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerTrigger,
  DatePickerDialog,
  DatePickerCalendar,
} from '@saas-ui/date-picker'
import { today, now, getLocalTimeZone } from '@internationalized/date'

export default function ControlledPicker() {
  const [value, setValue] = React.useState(now(getLocalTimeZone()))

  return (
    <Flex justifyContent="center">
      <DatePicker
        defaultIsOpen
        closeOnBlur={false}
        value={value}
        onChange={setValue}
        granularity="minute"
      >
        <DatePickerTrigger>
          <Button>{value.toString()}</Button>
        </DatePickerTrigger>
        <DatePickerDialog>
          <DatePickerCalendar />
          <DatePickerTimeField />
        </DatePickerDialog>
      </DatePicker>
    </Flex>
  )
}

Was this helpful?