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#

  • DateRangeInput: A date range form input.
import { DateRangeInput, DateRangeTimeInput } 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#

<FormControl>
<FormLabel>Dates</FormLabel>
<DateRangeInput />
</FormControl>

DateTime#

<FormControl>
<FormLabel>Dates and time</FormLabel>
<DateRangeInput granularity="minute" />
</FormControl>

With 24 hour time#

<FormControl>
<FormLabel>Dates and time</FormLabel>
<DateRangeInput granularity="minute" hourCycle="24" />
</FormControl>

Controlled#

function ControlledPicker() {
const [value, setValue] = React.useState({
start: today(getLocalTimeZone()),
end: null,
})
return <DateRangeInput value={value} onChange={setValue} />
}

Time zone#

function ControlledPicker() {
const [value, setValue] = React.useState({
start: now(getLocalTimeZone()),
end: null,
})
return (
<DateRangeInput value={value} onChange={setValue} granularity="minute" />
)
}

Hide time zone#

function ControlledPicker() {
const [value, setValue] = React.useState({
start: now(getLocalTimeZone()),
end: null,
})
return (
<DateRangeInput
value={value}
onChange={setValue}
granularity="minute"
hideTimeZone
/>
)
}

Props#

DateRangeInput Props#

hourCycle

Description

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

Type
12 | 24

locale

Type
string

timeZone

Type
string

Was this helpful?