CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
undefinedDownloadundefinedHire Us Get CoreUI PRO

CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

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

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Mo
Tu
We
Th
Fr
Sa
Su
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
<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.

Mo
Tu
We
Th
Fr
Sa
Su
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
Mo
Tu
We
Th
Fr
Sa
Su
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
Tuesday, March 1, 2022 - Monday, March 7, 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>
Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Mo
Tu
We
Th
Fr
Sa
Su
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
<CDateRangePicker footer locale="en-US" />
<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />

With timepicker

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
::
::
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Mo
Tu
We
Th
Fr
Sa
Su
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
::
::
<CDateRangePicker locale="en-US" timepicker />

Sizing

Set heights using size property like size="lg" and size="sm".

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<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.

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<CDateRangePicker disabled locale="en-US" />

Readonly

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<CDateRangePicker inputReadOnly locale="en-US" />

Disabled dates

Mo
Tu
We
Th
Fr
Sa
Su
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
Mo
Tu
We
Th
Fr
Sa
Su
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
<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

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<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

Mo
Tu
We
Th
Fr
Sa
Su
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<CDateRangePicker />

Chinese

星期
星期
星期
星期
星期
星期
星期
27日
28日
1日
2日
3日
4日
5日
6日
7日
8日
9日
10日
11日
12日
13日
14日
15日
16日
17日
18日
19日
20日
21日
22日
23日
24日
25日
26日
27日
28日
29日
30日
31日
1日
2日
3日
4日
5日
6日
7日
8日
9日
星期
星期
星期
星期
星期
星期
星期
27日
28日
29日
30日
31日
1日
2日
3日
4日
5日
6日
7日
8日
9日
10日
11日
12日
13日
14日
15日
16日
17日
18日
19日
20日
21日
22日
23日
24日
25日
26日
27日
28日
29日
30日
1日
2日
3日
4日
5日
6日
7日
<CDateRangePicker locale="zh-CN" :placeholder="['入住日期', '退房日期']" />

Japanese

月曜
火曜
水曜
木曜
金曜
土曜
日曜
27日
28日
1日
2日
3日
4日
5日
6日
7日
8日
9日
10日
11日
12日
13日
14日
15日
16日
17日
18日
19日
20日
21日
22日
23日
24日
25日
26日
27日
28日
29日
30日
31日
1日
2日
3日
4日
5日
6日
7日
8日
9日
月曜
火曜
水曜
木曜
金曜
土曜
日曜
27日
28日
29日
30日
31日
1日
2日
3日
4日
5日
6日
7日
8日
9日
10日
11日
12日
13日
14日
15日
16日
17日
18日
19日
20日
21日
22日
23日
24日
25日
26日
27日
28日
29日
30日
1日
2日
3日
4日
5日
6日
7日
<CDateRangePicker locale="ja" :placeholder="['日付を選択', '終了日']" />

Korean

월요
화요
수요
목요
금요
토요
일요
27일
28일
1일
2일
3일
4일
5일
6일
7일
8일
9일
10일
11일
12일
13일
14일
15일
16일
17일
18일
19일
20일
21일
22일
23일
24일
25일
26일
27일
28일
29일
30일
31일
1일
2일
3일
4일
5일
6일
7일
8일
9일
월요
화요
수요
목요
금요
토요
일요
27일
28일
29일
30일
31일
1일
2일
3일
4일
5일
6일
7일
8일
9일
10일
11일
12일
13일
14일
15일
16일
17일
18일
19일
20일
21일
22일
23일
24일
25일
26일
27일
28일
29일
30일
1일
2일
3일
4일
5일
6일
7일
<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

יו
יו
יו
יו
יו
יו
יו
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
יו
יו
יו
יו
יו
יו
יו
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<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;
$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>");

$date-picker-cleaner-icon-color:       $gray-600;
$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>");
$date-picker-cleaner-icon-hover-color: $body-color;
$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>");

$date-picker-separator-icon-color:     $gray-600;
$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>");
$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>");

$date-picker-ranges-width:             10rem;
$date-picker-ranges-padding:           $spacer * .5;
$date-picker-ranges-border-width:      1px;
$date-picker-ranges-border-color:      $border-color;

$date-picker-timepicker-width:         (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin);
$date-picker-timepicker-border-width:  1px;
$date-picker-timepicker-border-color:  $border-color;

API

CDateRangePicker 

import { CDateRangePicker } from '@coreui/vue-pro'
// or
import CDateRangePicker from '@coreui/vue-pro/src/components/date-range-picker/CDateRangePicker'

Props

Prop nameDescriptionTypeValuesDefault
calendarsThe number of calendars that render on desktop devices.number-2
calendar-dateDefault date of the componentdate|string-
cancel-buttonToggle visibility or set the content of cancel button.boolean|string-'Cancel'
cancel-button-colorSets 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-sizeSize the cancel button small or large.string'sm', 'lg''sm'
cancel-button-variantSet the cancel button variant to an outlined button or a ghost button.string'ghost', 'outline''ghost'
cleanerToggle 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-buttonToggle visibility or set the content of confirm button.boolean|string-'OK'
confirm-button-colorSets 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-sizeSize the confirm button small or large.string'sm', 'lg''sm'
confirm-button-variantSet 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'
disabledToggle the disabled state for the component.boolean-
disabled-datesSpecify the list of dates that cannot be selected.Date[] | Date[][]-
end-dateInitial 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-weekSets the day of start week.
- 0 - Sunday,
- 1 - Monday,
- 2 - Tuesday,
- 3 - Wednesday,
- 4 - Thursday,
- 5 - Friday,
- 6 - Saturday,		number-1
formatSet date format.
We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.		string-
footerToggle visibility of footer element or set the content of footer.boolean-
idThe 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-
indicatorToggle visibility or set the content of the input indicator.boolean-true
input-read-onlyToggle 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-
localeSets the default locale for components. If not set, it is inherited from the navigator.language.string-'default'
max-dateMax selectable date.date|string-
min-dateMin selectable date.date|string-
navigationShow arrows navigation.boolean-true
nav-year-first
4.6.0+
Reorder year-month navigation, and render year first.boolean-
placeholderSpecifies a short hint that is visible in the input.String | String[]-() => ['Start date', 'End date']
rangesPredefined date ranges the user can select from.object-
select-end-dateToggle select mode between start and end date.boolean-
separatorDefault icon or character character that separates two dates.boolean-true
sizeSize the component small or large.string'sm', 'lg'
start-dateInitial selected date.date|string-
text
4.6.0+
Add helper text to the component.string-
timepickerProvide an additional time selection by adding select boxes to choose times.boolean-
today-buttonToggle visibility or set the content of today button.boolean|string-'Today'
today-button-colorSets 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-sizeSize the today button small or large.string'sm', 'lg''sm'
today-button-variantSet 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-
visibleToggle the visibility of the component.boolean-
weekday-formatSet length or format of day name.
@type number | 'long' | 'narrow' | 'short'		func|number|string-2

Events

Event nameDescriptionProperties
end-date-changeCallback fired when the end date changed.date Date - date object
formatedDate string - formated date
hideCallback fired when the component requests to be hidden.
showCallback fired when the component requests to be shown.
start-date-changeCallback fired when the start date changed.date Date - date object
formatedDate string - formated date
update:start-dateCallback fired when the start date changed.date Date | null - date object
update:end-dateCallback fired when the end date changed.date Date | null - date object
On this page

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.