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?