DateField
A list of date-segments used as base for date-picker and date-range-picker
Optional props
className
Custom className
minValue
The minimum allowed date that a user may select.
maxValue
The maximum allowed date that a user may select.
isDateUnavailable
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
placeholderValue
A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
hourCycle
Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity
Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideTimeZone
Whether to hide the time zone abbreviation.
shouldForceLeadingZeros
Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
isDisabled
Whether the input is disabled.
isReadOnly
Whether the input can be selected but not changed by the user.
isRequired
Whether user input is required on the input before form submission.
isInvalid
Whether the input value is invalid.
validationBehavior
Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validate
A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if validationBehavior="native". For realtime validation, use the isInvalid
prop instead.
autoFocus
Whether the element should receive focus on render.
onFocus
Handler that is called when the element receives focus.
onBlur
Handler that is called when the element loses focus.
onFocusChange
Handler that is called when the element's focus status changes.
onKeyDown
Handler that is called when a key is pressed.
onKeyUp
Handler that is called when a key is released.
label
The content to display as the label.
description
A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage
An error message for the field.
isOpen
Whether the overlay is open by default (controlled).
defaultOpen
Whether the overlay is open by default (uncontrolled).
onOpenChange
Handler that is called when the overlay's open state changes.
value
The current value (controlled).
defaultValue
The default value (uncontrolled).
onChange
Handler that is called when the value changes.
aria-label
Defines a string value that labels the current element.
aria-labelledby
Identifies the element (or elements) that labels the current element.
aria-describedby
Identifies the element (or elements) that describes the object.
aria-details
Identifies the element (or elements) that provide a detailed, extended description for the object.