Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
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 (<DateRangeInputvalue={value}onChange={setValue}granularity="minute"hideTimeZone/>)}
Props#
DateRangeInput Props#
hourCycle
hourCycle
Description
Type
12 | 24
locale
locale
Type
string
timeZone
timeZone
Type
string
Was this helpful?