DateRangeInput
Allow users to enter or select a Date and Time range.
- Beta
Source
Theme source
@saas-ui/date-picker
- 2.8.9 (latest)
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 {DateRangePickerDateRangePickerInput,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 (<DateRangeInputvalue={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?