Date Picker
Date and Time pickers let users select a date and time for a form.
install | yarn add @clayui/date-picker |
---|---|
version | 3.123.1 |
Stable3.123.1View in LexiconCHANGELOG
Property | Description |
---|---|
ariaLabels IAriaLabels | Labels for the aria attributes The default value is { buttonChooseDate: 'Choose date', buttonDot: 'Select current date', buttonNextMonth: 'Select the next month', buttonPreviousMonth: 'Select the previous month', dialog: 'Choose date', } |
dateFormat string | Set the format of how the date will appear in the input element.
See available: https://date-fns.org/v2.14.0/docs/format The default value is 'yyyy-MM-dd' |
defaultExpanded boolean | Property to set if expanded by default (uncontrolled). |
defaultMonth Date | The start date to be displayed on the calendar as "Today". Used to mark the start date of the day and when resetting. |
defaultValue string | Property to set the default value (uncontrolled). |
disabled boolean | Flag to disable the component, buttons, open the datepicker, etc... |
expanded boolean | Determines if menu is expanded or not (controlled). |
firstDayOfWeek FirstDayOfWeek | Set the first day of the week, starting from
0 (Sunday) to 6 (Saturday). The default value is FirstDayOfWeek.Sunday |
footerElement (object: {spritemap?: string}) => React.ReactNode | Function that should return the React element to render on the datepicker footer. |
id string | Id to be applied to the element. |
initialExpanded Deprecatedboolean | Flag to indicate if date is initially expanded when
expand and onExpandChange are not being used.
@deprecated since v3.51.0 - use defaultExpanded instead.The default value is false |
initialMonth DeprecatedDate | The start date to be displayed on the calendar as "Today". Used to mark
the start date of the day and when resetting.
@deprecated since v3.51.0 - use defaultMonth instead.The default value is new Date() |
inputName string | Name of the input. |
months Array<string> | The names of the months. The default value is [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] |
onChange InternalDispatch<string> | Callback that is called when the value changes (controlled). |
onExpandedChange InternalDispatch<boolean> | Callback for when dropdown changes its expanded state (controlled). |
onNavigation (data: Date) => void | Called when the user is browsing the date picker, changing the
month, year and navigating with arrows. The default value is () => {} |
onValueChange DeprecatedInternalDispatch<string> | Called when the input change.
Second argument gives the type that caused the value change
@deprecated since v3.51.0 - use onChange instead. |
placeholder string | Describe a brief tip to help users interact. |
range boolean | * Flag to indicate the user will use the date-range date-picker |
spritemap string | Path to the location of the spritemap resource. |
time boolean | Flag to enable datetime selection. The default value is false |
timezone string | Flag to indicate the timezone of the Time Picker. |
use12Hours boolean | Flag to indicate if 12-hour use, when true, should show am/pm input. The default value is false |
useNative boolean | Flag to indicate whether to use native date picker The default value is false |
value string | The value property sets the current value (controlled). |
weekdaysShort Array<string> | Short names of days of the week to use in the header
of the month. It should start from Sunday. The default value is ['S', 'M', 'T', 'W', 'T', 'F', 'S'] |
years IYears | List of years available for navigation within the selector. The default value is { end: NEW_DATE.getFullYear(), start: NEW_DATE.getFullYear(), } |
yearsCheck boolean | Flag to indicate whether the DatePicker should validate if the year
is included in the range of years. Disable only if your range is dynamic. The default value is true |