DateRangeInput

Allow users to enter or select a Date and Time range.

The DateRangeInput is currently in beta, we'd love to hear your feedback while we finalize the API.

Import

DateRangePicker: The container component that manages state and context.
DateRangePickerInput: A date range form input.
DateRangePickerDialog: A dialog that contains a calendar and time picker.
DateRangePickerCalendar: A calendar that allows users to select a date range.

DateRangeInput: A composite component that composes the above components.

import {
  DateRangePicker
  DateRangePickerInput,
  DateRangePickerDialog,
  DateRangePickerCalendar,
  DateRangeInput
  } 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

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function Basic() {
  return (
    <FormControl>
      <FormLabel>Dates</FormLabel>
      <DateRangeInput />
    </FormControl>
  )
}

DateTime

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function DateTime() {
  return (
    <FormControl>
      <FormLabel>Dates</FormLabel>
      <DateRangeInput granularity="minute" />
    </FormControl>
  )
}

With 24 hour time

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function HourCycle() {
  return (
    <FormControl>
      <FormLabel>Dates and time</FormLabel>
      <DateRangeInput granularity="minute" hourCycle="24" />
    </FormControl>
  )
}

Controlled

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function ControlledPicker() {
  const [value, setValue] = React.useState({
    start: today(getLocalTimeZone()),
    end: null,
  })

  return <DateRangeInput value={value} onChange={setValue} />
}

Time zone

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function ControlledPicker() {
  const [value, setValue] = React.useState({
    start: now(getLocalTimeZone()),
    end: null,
  })

  return (
    <DateRangeInput value={value} onChange={setValue} granularity="minute" />
  )
}

Hide time zone

import { FormControl, FormLabel } from '@chakra-ui/react'
import { DateRangeInput } from '@saas-ui/date-picker'

export default function ControlledPicker() {
  const [value, setValue] = React.useState({
    start: now(getLocalTimeZone()),
    end: null,
  })

  return (
    <DateRangeInput
      value={value}
      onChange={setValue}
      granularity="minute"
      hideTimeZone
    />
  )
}

Composed

import { FormControl, FormLabel } from '@chakra-ui/react'
import {
  DateRangePicker,
  DateRangeInput,
  DateRangePickerDialog,
  DateRangePickerCalendar,
} from '@saas-ui/date-picker'

export default function Composed() {
  return (
    <FormControl>
      <FormLabel>Dates</FormLabel>
      <DateRangePicker>
        <DateRangeInput />
        <DateRangePickerDialog>
          <DateRangePickerCalendar />
        </DateRangePickerDialog>
      </DateRangePicker>
    </FormControl>
  )
}

Portal

import { FormControl, FormLabel, Portal } from '@chakra-ui/react'
import {
  DateRangePicker,
  DateRangeInput,
  DateRangePickerDialog,
  DateRangePickerCalendar,
} from '@saas-ui/date-picker'

export default function WithPortal() {
  return (
    <FormControl>
      <FormLabel>Dates</FormLabel>
      <DateRangePicker>
        <DateRangeInput />
        <Portal>
          <DateRangePickerDialog>
            <DateRangePickerCalendar />
          </DateRangePickerDialog>
        </Portal>
      </DateRangePicker>
    </FormControl>
  )
}

Was this helpful?