| 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 |
| calendars | 2 | number |
The number of calendars that render on desktop devices. |
| 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. |
| container5.21.0+ | 'dropdown' | 'dropdown', 'inline', string, HTMLElement, (() => HTMLElement), null |
Set container type for the component, or the element the calendar dropdown is rendered into. - 'dropdown' - the calendar is rendered as a dropdown (default), - 'inline' - the calendar is rendered inline, without a dropdown, - an HTML element, a CSS selector, or a function that returns a single element - the calendar is rendered inside that element. Implies teleport. |
| dayFormat4.6.0+ | 'numeric' | func, string |
Set the format of day name. |
| 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, |
Toggle visibility of footer element or set the content of footer. |
| 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. |
| 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. |
| monthFormat5.18.0+ | 'short' | string |
Sets the format for month names. |
| 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. |
| 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. |
| selectEndDate | - | boolean |
Toggle select mode between start and end date. |
| selectionType5.0.0+ | 'day' | string |
Specify the type of date selection as day, week, month, quarter, or year. |
| separator | true | boolean |
Default icon or character character that separates two dates. |
| 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. |
| 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. |