Vue Date Range Picker Component
Create consistent cross-browser and cross-device date range picker
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.
Example
<CDateRangePicker label="Date range" locale="en-US" />
<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" label="Date range" locale="en-US" />
vModel
By default, <CDateRangePicker> returns start-date and end-date as a Date objects. If no date is selected, <CDateRangePicker> returns null.
wtorek, 1 marca 2022 - poniedziałek, 7 marca 2022
<template>
<CDateRangePicker
label="Date range"
locale="en-US"
v-model:start-date="vStartDate"
v-model:end-date="vEndDate"
/>
<div>
{{ vStartDate && vStartDate.toLocaleDateString([], options) }}
-
{{ vEndDate && vEndDate.toLocaleDateString([], options) }}
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const vStartDate = ref(new Date(2022, 2, 1))
const vEndDate = ref(new Date(2022, 2, 7))
const options = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
}
return {
vStartDate,
vEndDate,
options
}
}
}
</script>
With footer
<CDateRangePicker footer locale="en-US" />
<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />
With timepicker
<CDateRangePicker locale="en-US" timepicker />
Sizing
Set heights using size property like size="lg" and size="sm".
<CDateRangePicker locale="en-US" size="lg" />
<CDateRangePicker locale="en-US" size="sm" />
Disabled
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
<CDateRangePicker disabled locale="en-US" />
Readonly
Add the inputReadOnly boolean attribute to prevent modification of the input's value.
<CDateRangePicker inputReadOnly locale="en-US" />
Disabled dates
<template>
<CDateRangePicker
:calendarDate="calendarDate"
:disabledDates="disabledDates"
locale="en-US"
:maxDate="maxDate"
:minDate="minDate"
/>
</template>
<script>
export default {
setup() {
const calendarDate = new Date(2022, 2, 1)
const disabledDates = [
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
new Date(2022, 2, 16),
new Date(2022, 3, 16),
[new Date(2022, 4, 2), new Date(2022, 4, 8)],
]
const maxDate = new Date(2022, 5, 0)
const minDate = new Date(2022, 1, 1)
return {
calendarDate,
disabledDates,
maxDate,
minDate,
}
}
}
</script>
Custom ranges
<template>
<CDateRangePicker :ranges="customRanges" />
</template>
<script>
export default {
setup() {
const customRanges = {
Today: [new Date(), new Date()],
Yesterday: [
new Date(new Date().setDate(new Date().getDate() - 1)),
new Date(new Date().setDate(new Date().getDate() - 1)),
],
'Last 7 Days': [
new Date(new Date().setDate(new Date().getDate() - 6)),
new Date(new Date()),
],
'Last 30 Days': [
new Date(new Date().setDate(new Date().getDate() - 29)),
new Date(new Date()),
],
'This Month': [
new Date(new Date().setDate(1)),
new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
],
'Last Month': [
new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
new Date(new Date().getFullYear(), new Date().getMonth(), 0),
],
}
return {
customRanges,
}
}
}
</script>
Non-english locale
Auto
<CDateRangePicker />
Chinese
<CDateRangePicker locale="zh-CN" :placeholder="['入住日期', '退房日期']" />
Japanese
<CDateRangePicker locale="ja" :placeholder="['日付を選択', '終了日']" />
Korean
<CDateRangePicker locale="ko" :placeholder="['날짜 선택', '종료일']" />
Right to left support
RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.
Hebrew
<CDateRangePicker :placeholder="['בחר תאריך', 'תאריך סיום']" locale="he-IL" />
Persian
<CDateRangePicker locale="fa-IR" :placeholder="['تاریخ شروع', 'تاریخ پایان']" />
Customizing
CSS variables
Vue date range pickers use local CSS variables on .date-picker and .calendar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-date-picker-ranges-width: #{$date-picker-ranges-width};
--cui-date-picker-ranges-padding: #{$date-picker-ranges-padding};
--cui-date-picker-ranges-border: #{$date-picker-ranges-border-width} solid #{$date-picker-ranges-border-color};
--cui-date-picker-timepicker-width: #{$date-picker-timepicker-width};
--cui-date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid #{$date-picker-timepicker-border-color};--cui-calendar-table-margin: #{$calendar-table-margin};
--cui-calendar-table-cell-size: #{$calendar-table-cell-size};
--cui-calendar-nav-padding: #{$calendar-nav-padding};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid #{$calendar-nav-border-color};
--cui-calendar-nav-date-color: #{$calendar-nav-date-color};
--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--cui-calendar-cell-today-color: #{$calendar-cell-today-color};How to use CSS variables
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CDateRangePicker :style="vars">...</CDateRangePicker>
SASS variables
$date-picker-default-icon-color: $gray-600 !default;
$date-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-default-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-default-icon-color}'></rect></svg>") !default;
$date-picker-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-invalid-color}'></rect></svg>") !default;
$date-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-valid-color}'></rect></svg>") !default;
$date-picker-cleaner-icon-color: $gray-600 !default;
$date-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
$date-picker-cleaner-icon-hover-color: $body-color !default;
$date-picker-cleaner-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-hover-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-hover-color})' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
$date-picker-separator-icon-color: $gray-600 !default;
$date-picker-separator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>") !default;
$date-picker-separator-icon-rtl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>") !default;
$date-picker-ranges-width: 10rem !default;
$date-picker-ranges-padding: $spacer * .5 !default;
$date-picker-ranges-border-width: 1px !default;
$date-picker-ranges-border-color: $border-color !default;
$date-picker-timepicker-width: (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin) !default;
$date-picker-timepicker-border-width: 1px !default;
$date-picker-timepicker-border-color: $border-color !default;$calendar-table-margin: .5rem !default;
$calendar-table-cell-size: 2.75rem !default;
$calendar-nav-padding: .5rem !default;
$calendar-nav-border-width: 1px !default;
$calendar-nav-border-color: $border-color !default;
$calendar-nav-date-color: $body-color !default;
$calendar-nav-date-hover-color: $primary !default;
$calendar-nav-icon-width: 1rem !default;
$calendar-nav-icon-height: 1rem !default;
$calendar-nav-icon-double-next-color: $gray-600 !default;
$calendar-nav-icon-double-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-next-hover-color: $body-color !default;
$calendar-nav-icon-double-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev-color: $gray-600 !default;
$calendar-nav-icon-double-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev-hover-color: $body-color !default;
$calendar-nav-icon-double-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-next-color: $gray-600 !default;
$calendar-nav-icon-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-next-hover-color: $body-color !default;
$calendar-nav-icon-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev-color: $gray-600 !default;
$calendar-nav-icon-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev-hover-color: $body-color !default;
$calendar-nav-icon-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
$calendar-cell-header-inner-color: $text-medium-emphasis !default;
$calendar-cell-hover-bg: $gray-200 !default;
$calendar-cell-disabled-color: $text-disabled !default;
$calendar-cell-selected-color: $white !default;
$calendar-cell-selected-bg: $primary !default;
$calendar-cell-range-bg: rgba($primary, .125) !default;
$calendar-cell-range-hover-bg: rgba($primary, .25) !default;
$calendar-cell-range-hover-border-color: $primary !default;
$calendar-cell-today-color: $danger !default;API
CDateRangePicker
import { CDateRangePicker } from '@coreui/vue-pro'
// or
import CDateRangePicker from '@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker'
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| calendars | The number of calendars that render on desktop devices. | number | - | 2 |
| calendar-date | Default date of the component | date|string | - | - |
| cancel-button | Toggle visibility or set the content of cancel button. | boolean|string | - | 'Cancel' |
| cancel-button-color | Sets the color context of the cancel button to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | 'primary' |
| cancel-button-size | Size the cancel button small or large. | string | 'sm', 'lg' | 'sm' |
| cancel-button-variant | Set the cancel button variant to an outlined button or a ghost button. | string | 'ghost', 'outline' | 'ghost' |
| cleaner | Toggle visibility of the cleaner button. | boolean | - | true |
| close-on-select 4.7.0+ | If true the dropdown will be immediately closed after submitting the full date. | boolean | - | true |
| confirm-button | Toggle visibility or set the content of confirm button. | boolean|string | - | 'OK' |
| confirm-button-color | Sets the color context of the confirm button to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | 'primary' |
| confirm-button-size | Size the confirm button small or large. | string | 'sm', 'lg' | 'sm' |
| confirm-button-variant | Set the confirm button variant to an outlined button or a ghost button. | string | 'ghost', 'outline' | - |
| day-format 4.6.0+ | Set the format of day name.@default 'numeric' | func|string | - | 'numeric' |
| disabled | Toggle the disabled state for the component. | boolean | - | - |
| disabled-dates | Specify the list of dates that cannot be selected. | Date[] | Date[][] | - | - |
| end-date | Initial selected to date (range). | date|string | - | - |
| feedback 4.6.0+ | Provide valuable, actionable feedback. | string | - | - |
| feedback-invalid 4.6.0+ | Provide valuable, actionable feedback. | string | - | - |
| feedback-valid 4.6.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | string | - | - |
| first-day-of-week | Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, | number | - | 1 |
| format | Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. | string | - | - |
| footer | Toggle visibility of footer element or set the content of footer. | boolean | - | - |
| id | The id global attribute defines an identifier (ID) that must be unique in the whole document. The name attributes for input elements are generated based on the id property:- {id}-start-date - {id}-end-date | string | - | - |
| indicator | Toggle visibility or set the content of the input indicator. | boolean | - | true |
| input-read-only | Toggle the readonly state for the component. | boolean | - | - |
| invalid 4.6.0+ | Set component validation state to invalid. | boolean | - | - |
| label 4.6.0+ | Add a caption for a component. | string | - | - |
| locale | Sets the default locale for components. If not set, it is inherited from the navigator.language. | string | - | 'default' |
| max-date | Max selectable date. | date|string | - | - |
| min-date | Min selectable date. | date|string | - | - |
| navigation | Show arrows navigation. | boolean | - | true |
| nav-year-first 4.6.0+ | Reorder year-month navigation, and render year first. | boolean | - | - |
| placeholder | Specifies a short hint that is visible in the input. | string | string[] | - | () => ['Start date', 'End date'] |
| ranges | Predefined date ranges the user can select from. | object | - | - |
| required 4.9.0+ | When present, it specifies that must be filled out before submitting the form. | boolean | - | - |
| select-end-date | Toggle select mode between start and end date. | boolean | - | - |
| select-adjacement-days 4.9.0+ | 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. | boolean | - | - |
| show-adjacement-days 4.9.0+ | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | boolean | - | true |
| separator | Default icon or character character that separates two dates. | boolean | - | true |
| size | Size the component small or large. | string | 'sm', 'lg' | - |
| start-date | Initial selected date. | date|string | - | - |
| text 4.6.0+ | Add helper text to the component. | string | - | - |
| timepicker | Provide an additional time selection by adding select boxes to choose times. | boolean | - | - |
| today-button | Toggle visibility or set the content of today button. | boolean|string | - | 'Today' |
| today-button-color | Sets the color context of the today button to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | 'primary' |
| today-button-size | Size the today button small or large. | string | 'sm', 'lg' | 'sm' |
| today-button-variant | Set the today button variant to an outlined button or a ghost button. | string | 'ghost', 'outline' | - |
| tooltip-feedback 4.6.0+ | Display validation feedback in a styled tooltip. | boolean | - | - |
| valid 4.6.0+ | Set component validation state to valid. | boolean | - | - |
| visible | Toggle the visibility of the component. | boolean | - | - |
| weekday-format | Set length or format of day name.@type number | 'long' | 'narrow' | 'short' | func|number|string | - | 2 |
Events
| Event name | Description | Properties |
|---|---|---|
| end-date-change | Callback fired when the end date changed. | date Date - date objectformatedDate string - formated date |
| hide | Callback fired when the component requests to be hidden. | |
| show | Callback fired when the component requests to be shown. | |
| start-date-change | Callback fired when the start date changed. | date Date - date objectformatedDate string - formated date |
| update:start-date | Callback fired when the start date changed. | date Date | null - date object |
| update:end-date | Callback fired when the end date changed. | date Date | null - date object |