| name | description | type | default | | ---- | ----------- | ---- | ------- | | `startDate` | Initial selected start date. | `Date` | _undefined_ | | `endDate` | Initial selected start date. | `Date` | _undefined_ | | `calendarDate` | Default date month of the component. | `Date` | _undefined_ | | `cleaner` | Toggle visibility or set the content of the cleaner button. | `boolean` | _true_ | | `closeOnSelect` | Determine if dropdown should be closed when component value is set. | `boolean` | _false_ | | `disabled` | Toggle the disabled state for the component. | `boolean` | _false_ | | `disabledDates` | List of dates that cannot be selected. | `(Date` \| `Date[])[]` | _undefined_ | | `firstDayOfWeek` | Sets the day of start week. | `number` | _1_ | | `format`
| Formats a date display. See: DatePipe format options. Makes the input read-only.| `string` | _undefined_ | | `indicator` | Toggle visibility or set the content of the input indicator. | `boolean` | _true_ | | `inputReadOnly` | Toggle the readonly state for the input. | `boolean` | _false_ | | `locale` | Sets the default locale for components. If not set, it is inherited from the browser. | `string` | _default_ | | `maxDate` | Max selectable date. | `Date` | _undefined_ | | `minDate` | Min selectable date. | `Date` | _undefined_ | | `navYearFirst` | Reorder year-month navigation, and render year first. | `boolean` | _false_ | | `navigation` | Show arrows navigation. | `boolean` | _true_ | | `placeholder` | Specifies hint visible in date input. | `string[]` | _Start date_, _End Date_ | | `size` | Size the component input small or large. | `sm` \| `lg` | _undefined_ | | `dayFormat` | Set the format of day number. | `numeric` \| `2-digit` \| `(date: Date) => string \| number` | _numeric_ | | `weekdayFormat` | Set length or format of day name. | `number` \| `long` \| `narrow` \| `short` | _2_ | | `ranges` | Predefined date ranges the user can select from. | `object` | _undefined_ | | `rangesButtonsColor` | Sets the color context of the cancel button to one of CoreUI themed colors. | `Colors` | _secondary_ | | `rangesButtonsSize` | Size the ranges button small or large. | `sm` \| `lg` | _undefined_ | | `rangesButtonsVariant` | Set the ranges button variant to an outlined button or a ghost button. | `outline` \| `ghost` | _ghost_ | | `selectAdjacentDays`
| Days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to `true`. | `boolean` | _false_ | | `showAdjacentDays`
| Display dates in adjacent months (non-selectable) at the start/end of the current month. | `boolean` | _true_ | | `valid` | Set input validation visual feedback. | `boolean` | _undefined_ | | `showWeekNumber` | Display ISO week numbers in month view. | `boolean` | _undefined_ | | `weekNumbersLabel` | Label displayed over week numbers in the calendar. | `string` | _undefined_ | | `inputDateFormat` | Custom function to format the selected date into a string according to a custom format. | `(date: Date) => string` | _undefined_ | | `inputDateParse` | Custom function to parse the input value into a valid Date object. | `(date: string | Date) => Date` | _undefined_ |

| name | description | type | | ---- | ----------- | ---- | | `startDateChange` | Event emitted on `startDate` change | `Date` | | `endDateChange` | Event emitted on `startDate` change | `Date` | | `calendarCellHover` | Event emitted on calendar cell hover | `Date` | | `calendarDateChange` | Event emitted on calendar month change | `Date` | | `valueChange` | Event emitted on `value` change | `{startDate: Date, endDate: Date}` |