| ariaNavNextMonthLabel5.4.0+ | 'Next month' | string |
A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button. |
| ariaNavNextYearLabel5.4.0+ | 'Next year' | string |
A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality. |
| ariaNavPrevMonthLabel5.4.0+ | 'Previous month' | string |
A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button. |
| ariaNavPrevYearLabel5.4.0+ | 'Previous year' | string |
A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function. |
| calendarDate | - | date, string |
Default date of the component |
| cancelButton | 'Cancel' | boolean, string |
Toggle visibility or set the content of cancel button. |
| cancelButtonColor | 'primary' | string |
Sets the color context of the cancel button to one of CoreUI’s themed colors. |
| cancelButtonSize | 'sm' | string |
Size the cancel button small or large. |
| cancelButtonVariant | 'ghost' | string |
Set the cancel button variant to an outlined button or a ghost button. |
| cleaner | true | boolean |
Toggle visibility of the cleaner button. |
| confirmButton | 'OK' | boolean, string |
Toggle visibility or set the content of confirm button. |
| confirmButtonColor | 'primary' | string |
Sets the color context of the confirm button to one of CoreUI’s themed colors. |
| confirmButtonSize | 'sm' | string |
Size the confirm button small or large. |
| confirmButtonVariant | - | string |
Set the confirm button variant to an outlined button or a ghost button. |
| dayFormat4.6.0+ | 'numeric' | func, string |
Set the format of day name. |
| monthFormat5.18.0+ | 'short' | string |
Sets the format for month names. |
| disabled | - | boolean |
Toggle the disabled state for the component. |
| disabledDates | - | |
Specify the list of dates that cannot be selected. |
| date | - | date, string |
Initial selected date. |
| firstDayOfWeek | 1 | number |
Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, |
| format | - | string |
Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. |
Toggle visibility of footer element or set the content of footer. |
| id | - | string |
The id global attribute defines an identifier (ID) that must be unique in the whole document. **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.: - \{id\}-date |
| indicator | true | boolean |
Toggle visibility or set the content of the input indicator. |
| inputReadOnly | - | boolean |
Toggle the readonly state for the component. |
| inputDateFormat5.0.0+ | - | func |
Custom function to format the selected date into a string according to a custom format. |
| inputDateParse5.0.0+ | - | func |
Custom function to parse the input value into a valid Date object. |
| inputOnChangeDelay5.0.0+ | 750 | number |
Defines the delay (in milliseconds) for the input field's onChange event. |
| locale | 'default' | string |
Sets the default locale for components. If not set, it is inherited from the navigator.language. |
| maxDate | - | date, string |
Max selectable date. |
| minDate | - | date, string |
Min selectable date. |
| name5.3.0+ | - | string |
The name attribute for the input element. |
| navigation | true | boolean |
Show arrows navigation. |
| navYearFirst4.6.0+ | - | boolean |
Reorder year-month navigation, and render year first. |
| placeholder | 'Select date' | string |
Specifies a short hint that is visible in the input. |
| previewDateOnHover5.14.0+ | true | boolean |
Enable live preview of dates in input fields when hovering over calendar cells. |
| selectAdjacementDays4.9.0+ | - | boolean |
Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacementDays option is set to true. |
| selectionType5.0.0+ | 'day' | string |
Specify the type of date selection as day, week, month, quarter, or year. |
| showAdjacementDays4.9.0+ | true | boolean |
Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |
| showWeekNumber5.0.0+ | - | boolean |
Set whether to display week numbers in the calendar. |
| size | - | string |
Size the component small or large. |
| teleport5.8.0+ | false | boolean |
Generates dropdown menu using Teleport. |
| timepicker | - | boolean |
Provide an additional time selection by adding select boxes to choose times. |
| weekdayFormat | 2 | func, number, string |
Set length or format of day name. |
| weekNumbersLabel5.0.0+ | - | string |
Label displayed over week numbers in the calendar. |
| yearFormat5.18.0+ | 'numeric' | string |
Sets the format for years. |