| 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. |
| calendars | 2 | number |
The number of calendars that render on desktop devices. |
| 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. |
| closeOnSelect4.7.0+ | true | boolean |
If true the dropdown will be immediately closed after submitting the full date. |
| 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. |
| endDate | - | date, string |
Initial selected to date (range). |
| feedback4.6.0+ | - | string |
Provide valuable, actionable feedback. |
| feedbackInvalid4.6.0+ | - | string |
Provide valuable, actionable feedback. |
| feedbackValid4.6.0+ | - | string |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. |
| 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, [string, string] |
The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately. **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.: - \{id\}-start-date - \{id\}-end-date |
| indicator | true | boolean |
Toggle visibility or set the content of the input indicator. |
| 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. |
| inputReadOnly | - | boolean |
Toggle the readonly state for the component. |
| invalid4.6.0+ | undefined | boolean |
Set component validation state to invalid. |
| label4.6.0+ | - | string |
Add a caption for a component. |
| 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, [string, string] |
The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately. Example for single string: 'date-input' Result: 'date-input-start-date', 'date-input-end-date' Example for array: ['start-date-input', 'end-date-input'] Result: 'start-date-input', 'end-date-input' |
| navigation | true | boolean |
Show arrows navigation. |
| navYearFirst4.6.0+ | - | boolean |
Reorder year-month navigation, and render year first. |
| placeholder | () => ['Start date', 'End date'] | string, [string, 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. |
| range | true | boolean |
- |
| ranges | - | object |
Predefined date ranges the user can select from. |
| required4.9.0+ | - | boolean |
When present, it specifies that must be filled out before submitting the form. |
| selectEndDate | - | boolean |
Toggle select mode between start and end date. |
| 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. |
| separator | true | boolean |
Default icon or character character that separates two dates. |
| size | - | string |
Size the component small or large. |
| startDate | - | date, string |
Initial selected date. |
| teleport5.8.0+ | false | boolean |
Generates dropdown menu using Teleport. |
| text4.6.0+ | - | string |
Add helper text to the component. |
| timepicker | - | boolean |
Provide an additional time selection by adding select boxes to choose times. |
| todayButton | 'Today' | boolean, string |
Toggle visibility or set the content of today button. |
| todayButtonColor | 'primary' | string |
Sets the color context of the today button to one of CoreUI’s themed colors. |
| todayButtonSize | 'sm' | string |
Size the today button small or large. |
| todayButtonVariant | - | string |
Set the today button variant to an outlined button or a ghost button. |
| tooltipFeedback4.6.0+ | - | boolean |
Display validation feedback in a styled tooltip. |
| valid4.6.0+ | undefined | boolean |
Set component validation state to valid. |
| visible | - | boolean |
Toggle the visibility of the component. |
| 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. |