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?