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 Picker Component

Create consistent cross-browser and cross-device date 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
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
1
2
3
4
5
6
7
8
9
10
11
12
13
<CDatePicker label="Date" locale="en-US" />
<CDatePicker date="2022/2/16" label="Date" locale="en-US" />

vModel

By default, <CDatPicker> returns date as a Date object. If no date is selected, <CDatPicker> 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
wtorek, 1 marca 2022
<template>
  <CDatePicker label="Date" locale="en-US" v-model:date="vDate" />
  <div>{{ vDate && vDate.toLocaleDateString([], options) }}</div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const vDate = ref(new Date(2022, 2, 1))
      const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
      }
      return {
        vDate,
        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
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
1
2
3
4
5
6
7
8
9
10
11
12
13
<CDatePicker footer locale="en-US" />
<CDatePicker date="2022/2/16" 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
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
::
<CDatePicker locale="en-US" timepicker />
<CDatePicker date="2023/03/15 02:22:13 PM" 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
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
<CDatePicker locale="en-US" size="lg" />
<CDatePicker 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
<CDatePicker 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
<CDatePicker 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
<template>
  <CDatePicker
    :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>

Non-english locale

Auto

po
wt
śr
cz
pi
so
ni
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
<CDatePicker />

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日
<CDatePicker placeholder="入住日期" locale="zh-CN" />

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日
<CDatePicker placeholder="日付を選択" locale="ja" />

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일
<CDatePicker placeholder="날짜 선택" locale="ko" />

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
<CDatePicker placeholder="בחר תאריך" locale="he-IL" />

Persian

دو
سه
چه
پن
جم
شن
یک
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
<CDatePicker placeholder="تاریخ شروع" locale="fa-IR" />

Customizing

CSS variables

Vue date 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 <CDatePicker :style="vars">...</CDatePicker>

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

CDatePicker 

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

Props

Prop nameDescriptionTypeValuesDefault
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
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[][]--
dateInitial selected date.date|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 attribute for the input element is generated based on the id property:
- {id}-date		string--
indicatorToggle visibility or set the content of the input indicator.boolean-true
input-read-onlyToggle the readonly state for the component.boolean--
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-'Select date'
sizeSize the component small or large.string'sm', 'lg'-
timepickerProvide an additional time selection by adding select boxes to choose times.boolean--
weekday-formatSet length or format of day name.
@type number | 'long' | 'narrow' | 'short'		func|number|string-2

Events

Event nameDescriptionProperties
date-changeCallback fired when the date changed.date Date - date object
formatedDate string - formated date
update:dateCallback fired when the 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.