Date Picker
Date and Time pickers let users select a date and time for a form.
| install | yarn add @clayui/date-picker |
|---|---|
| version | 3.120.0 |
Stable3.120.0View in LexiconCHANGELOG
| Property | Description |
|---|---|
ariaLabelsIAriaLabels | 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', } |
dateFormatstring | 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' |
defaultExpandedboolean | Property to set if expanded by default (uncontrolled). |
defaultMonthDate | The start date to be displayed on the calendar as "Today". Used to mark the start date of the day and when resetting. |
defaultValuestring | Property to set the default value (uncontrolled). |
disabledboolean | Flag to disable the component, buttons, open the datepicker, etc... |
expandedboolean | Determines if menu is expanded or not (controlled). |
firstDayOfWeekFirstDayOfWeek | 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. |
idstring | Id to be applied to the element. |
initialExpandedboolean | 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 |
initialMonthDate | 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() |
inputNamestring | Name of the input. |
monthsArray<string> | The names of the months. The default value is [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] |
onChangeInternalDispatch<string> | Callback that is called when the value changes (controlled). |
onExpandedChangeInternalDispatch<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 () => {} |
onValueChangeInternalDispatch<string> | Called when the input change.
Second argument gives the type that caused the value change
@deprecated since v3.51.0 - use onChange instead. |
placeholderstring | Describe a brief tip to help users interact. |
rangeboolean | * Flag to indicate the user will use the date-range date-picker |
spritemapstring | Path to the location of the spritemap resource. |
timeboolean | Flag to enable datetime selection. The default value is false |
timezonestring | Flag to indicate the timezone of the Time Picker. |
use12Hoursboolean | Flag to indicate if 12-hour use, when true, should show am/pm input. The default value is false |
useNativeboolean | Flag to indicate whether to use native date picker The default value is false |
valuestring | The value property sets the current value (controlled). |
weekdaysShortArray<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'] |
yearsIYears | List of years available for navigation within the selector. The default value is { end: NEW_DATE.getFullYear(), start: NEW_DATE.getFullYear(), } |
yearsCheckboolean | 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 |