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?