DateInput

Allow users to enter or select a Date and Time value.

The DateInput is currently in beta, we'd love to hear your feedback while we finalize the API.

Import#

  • DateInput: A date form input.
  • DateTimeInput: A date time form input.
import { DateInput, DateTimeInput } 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>Date</FormLabel>
  <DateInput />
</FormControl>

DateTime#

<FormControl>
  <FormLabel>Date and time</FormLabel>
  <DateTimeInput />
</FormControl>

With 24 hour time#

<FormControl>
  <FormLabel>Date and time</FormLabel>
  <DateTimeInput hourCycle="24" />
</FormControl>

Controlled#

function ControlledPicker() {
  const [value, setValue] = React.useState(today(getLocalTimeZone()))


  return <DateInput value={value} onChange={setValue} />
}

Time zone#

function ControlledPicker() {
  const [value, setValue] = React.useState(now(getLocalTimeZone()))


  return (
    <DateTimeInput value={value} onChange={setValue} granularity="minute" />
  )
}

Hide time zone#

function ControlledPicker() {
  const [value, setValue] = React.useState(now(getLocalTimeZone()))


  return (
    <DateTimeInput
      value={value}
      onChange={setValue}
      granularity="minute"
      hideTimeZone
    />
  )
}

Props#

DateInput Props#

calendarIcon

Type
ReactNode

defaultValue

Type
DateValue

locale

Type
string

maxValue

Type
DateValue

minValue

Type
DateValue

onChange

Type
((value: DateValue | null) => void)

timeZone

Type
string

value

Type
DateValue | null

DateTimeInput Props#

Was this helpful?