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?