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

<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.

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>
<CDatePicker footer locale="en-US" />
<CDatePicker date="2022/2/16" footer locale="en-US" />

With timepicker

<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".

<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.

<CDatePicker disabled locale="en-US" />

Readonly

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

<CDatePicker inputReadOnly locale="en-US" />

Disabled dates

<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

<CDatePicker />

Chinese

<CDatePicker placeholder="入住日期" locale="zh-CN" />

Japanese

<CDatePicker placeholder="日付を選択" locale="ja" />

Korean

<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

<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 !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

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'
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
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