ReactNode
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 (<DateTimeInputvalue={value}onChange={setValue}granularity="minute"hideTimeZone/>)}
Props#
DateInput Props#
calendarIcon
calendarIcon
Type
defaultValue
defaultValue
Type
DateValue
locale
locale
Type
string
maxValue
maxValue
Type
DateValue
minValue
minValue
Type
DateValue
onChange
onChange
Type
((value: DateValue | null) => void)
timeZone
timeZone
Type
string
value
value
Type
DateValue | null
DateTimeInput Props#
Was this helpful?