Vue Date Picker Component

Date Picker

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Get CoreUI PRO

The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.

Available in Other JavaScript Frameworks

CoreUI Vue Date Picker Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

On this page

About

This component, provided by CoreUI for Vue.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.

With its responsive design and support for all modern browsers, the Vue Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application’s design.

The Vue Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.

One of the standout features of the Vue Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality.

Example

Below is an example of a basic Vue DatePicker.

Days

Basic examples demonstrating how to pick dates using the Vue Date Picker Component.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker label="Date" locale="en-US" />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2022/2/16" label="Date" locale="en-US" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

vModel

By default, <CDatPicker> returns date as a Date object. If no date is selected, <CDatPicker> returns null.

vue

<template>
  <div class="row mb-3">
    <div class="col-lg-6">
      <CDatePicker label="Date" locale="en-US" v-model:date="vDate" />
    </div>
  </div>
  <div>{{ vDate && vDate.toLocaleDateString([], options) }}</div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

With timepicker

In addition to supporting date selection, our Vue DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. Vue TimePicker can be enabled by passing a timepicker prop to the <CDatePicker/> component

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker locale="en-US" timepicker />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2023/03/15 02:22:13 PM" locale="en-US" timepicker />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as “Today” or “Clear” buttons. The footer component is fully customizable and can be styled to match the rest of the application.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker footer locale="en-US" />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2022/2/16" footer locale="en-US" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Weeks

Illustration of week selection using the Vue Date Picker, including week number display.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker label="Week Picker" locale="en-US" selectionType="week" showWeekNumber />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker
        date="2025W07"
        label="Week Picker"
        locale="en-US"
        selectionType="week"
        showWeekNumber
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Months

Selecting whole months with the Vue Date Picker Component.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker label="Month Picker" locale="en-US" selectionType="month" />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2022-08" label="Month Picker" locale="en-US" selectionType="month" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Quarters

Selecting quarters using the Vue Date Picker.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker label="Quarter Picker" locale="en-US" selectionType="quarter" />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2025Q1" label="Quarter Picker" locale="en-US" selectionType="quarter" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Years

Picking years using the Vue Date Picker.

vue

<template>
  <div class="row">
    <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
      <CDatePicker label="Year Picker" locale="en-US" selectionType="year" />
    </div>
    <div class="col-sm-6 col-lg-5">
      <CDatePicker date="2022" label="Year Picker" locale="en-US" selectionType="year" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Sizing

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

vue

<template>
  <div class="row mb-4">
    <div class="col-lg-6">
      <CDatePicker locale="en-US" size="lg" />
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker locale="en-US" size="sm" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker disabled locale="en-US" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Readonly

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

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker inputReadOnly locale="en-US" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Preview date on hover

By default, the date picker shows a live preview in the input field when hovering over calendar dates. To disable this feature, set previewDateOnHover to false.

vue

<template>
  <div class="row">
    <div class="col-sm-6 mb-3 mb-sm-0">
      <CDatePicker label="With preview (default)" locale="en-US" />
    </div>
    <div class="col-sm-6">
      <CDatePicker label="Without preview" locale="en-US" :previewDateOnHover="false" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Disabled dates

CoreUI Vue DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to disabledDate prop to the component, which determines which dates should be disabled based on custom logic.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker
        :calendarDate="calendarDate"
        :disabledDates="disabledDates"
        locale="en-US"
        :maxDate="maxDate"
        :minDate="minDate"
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Disabling weekends

You can disable weekends by passing a function to the disabledDates prop. Here’s how to do it:

vue

<template>
  <div class="row">
    <div class="col-lg-5">
      <CDatePicker :disabledDates="disableWeekends" locale="en-US" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Non-english locale

CoreUI Vue Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages.

Auto

By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Chinese

Below is an example of a basic Vue Date Picker with Chinese locales.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker placeholder="入住日期" locale="zh-CN" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Japanese

Below is an example of a basic Vue Date Picker with Japanese locales.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker placeholder="日付を選択" locale="ja" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Korean

Below is an example of a basic Vue Date Picker with Korean locales.

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker placeholder="날짜 선택" locale="ko" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

vue

<template>
  <div class="row" dir="rtl">
    <div class="col-lg-4">
      <CDatePicker placeholder="בחר תאריך" locale="he-IL" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Persian

vue

<template>
  <div class="row" dir="rtl">
    <div class="col-lg-4">
      <CDatePicker placeholder="تاریخ شروع" locale="fa-IR" />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Custom formats

Heads up! As of v5.0.0, the format property is removed in <CDatePicker>. Instead, utilize the inputDateFormat to format dates into custom strings and inputDateParse to parse custom strings into Date objects.

The provided code demonstrates how to use the inputDateFormat and inputDateParse properties. In this example, the format and parse functions from date-fns are employed to tailor the date presentation and interpretation.

import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'

vue

<template>
  <div class="row">
    <div class="col-lg-4">
      <CDatePicker
        date="2022/08/17"
        label="Date picker"
        locale="en-US"
        :inputDateParse="(date) => parse(date, 'MMMM dd, yyyy', new Date())"
        :inputDateFormat="(date) => format(new Date(date), 'MMMM dd, yyyy')"
      />
    </div>
    <div class="col-lg-4">
      <CDatePicker
        date="2022/08/17"
        label="Selector de fechas"
        locale="es-ES"
        placeholder="Seleccionar fecha"
        :inputDateParse="(date) => parse(date, 'yyyy MMMM dd', new Date(), { locale: es })"
        :inputDateFormat="(date) => format(new Date(date), 'yyyy MMMM dd', { locale: es })"
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

With timepicker

If you need to display custom date and time formats, use the timepicker property along with inputDateParse and inputDateFormat. This allows users to select a date with a specified time format, such as 'MMM dd, yyyy h:mm:ss a'.

vue

<template>
  <div class="row">
    <div class="col-lg-5">
      <CDatePicker
        date="2022/08/03 02:34:17 AM"
        label="Date picker"
        locale="en-US"
        timepicker
        :inputDateParse="(date) => parse(date, 'MMM dd, yyyy h:mm:ss a', new Date())"
        :inputDateFormat="(date) => format(new Date(date), 'MMM dd, yyyy h:mm:ss a')"
      />
    </div>
    <div class="col-lg-5">
      <CDatePicker
        date="2022/08/03 02:34:17 AM"
        label="Selector de fechas"
        locale="es-ES"
        placeholder="Seleccionar fecha"
        timepicker
        :inputDateParse="(date) => parse(date, 'yyyy MMM dd h:mm:ss a', new Date(), { locale: es })"
        :inputDateFormat="(date) => format(new Date(date), 'yyyy MMM dd h:mm:ss a', { locale: es })"
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Weeks

If you want to show weeks in a custom format, set the selectionType to 'week'. This configuration allows you to use inputDateParse and inputDateFormat to present and parse week-based date strings, like 'Io RRRR'. Additionally, the showWeekNumber property can be used to display week numbers in your preferred format.

vue

<template>
  <div class="row">
    <div class="col-lg-6">
      <CDatePicker
        date="2022W10"
        label="Date picker"
        locale="en-US"
        :inputDateParse="
          (date) =>
            parse(date, 'Io RRRR', new Date(), {
              useAdditionalWeekYearTokens: true,
            })
        "
        :inputDateFormat="(date) => format(new Date(date), 'Io RRRR')"
        selectionType="week"
        showWeekNumber
      />
    </div>
    <div class="col-lg-6">
      <CDatePicker
        date="2022W10"
        label="Selector de fechas"
        locale="es-ES"
        :inputDateParse="
          (date) =>
            parse(date, 'Io RRRR', new Date(), {
              locale: es,
              useAdditionalWeekYearTokens: true,
            })
        "
        :inputDateFormat="(date) => format(new Date(date), 'Io RRRR', { locale: es })"
        selectionType="week"
        showWeekNumber
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Months

If your application requires month selection in a specific format, set the selectionType property to 'month'. Using inputDateFormat and inputDateParse, you can customize the display of months, such as using the format 'MMM yyyy'.

vue

<template>
  <div class="row">
    <div class="col-lg-6">
      <CDatePicker
        date="2022-08"
        label="Date range"
        locale="en-US"
        :inputDateParse="(date) => parse(date, 'MMM yyyy', new Date())"
        :inputDateFormat="(date) => format(new Date(date), 'MMM yyyy')"
        selectionType="month"
      />
    </div>
    <div class="col-lg-6">
      <CDatePicker
        date="2022-08"
        label="Selector de fechas"
        locale="es-ES"
        :inputDateParse="(date) => parse(date, 'MMM yyyy', new Date(), { locale: es })"
        :inputDateFormat="(date) => format(new Date(date), 'MMM yyyy', { locale: es })"
        selectionType="month"
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Years

If you need to work with custom year formats, set the selectionType to 'year'. This enables you to use inputDateFormat and inputDateParse to format years in a manner that suits your application’s requirements, like 'yy'.

vue

<template>
  <div class="row">
    <div class="col-lg-6">
      <CDatePicker
        date="2022"
        label="Date range"
        locale="en-US"
        :inputDateParse="(date) => parse(date, 'yy', new Date())"
        :inputDateFormat="(date) => format(new Date(date), 'yy')"
        selectionType="year"
      />
    </div>
    <div class="col-lg-6">
      <CDatePicker
        date="2022"
        label="Selector de fechas"
        locale="es-ES"
        :inputDateParse="(date) => parse(date, 'yy', new Date(), { locale: es })"
        :inputDateFormat="(date) => format(new Date(date), 'yy', { locale: es })"
        selectionType="year"
      />
    </div>
  </div>
</template>

<script setup>
import { CDatePicker } from '@coreui/vue'
import { ref } from 'vue'
import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'
const vDate = ref(new Date(2022, 2, 1))
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
}
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)
const disableWeekends = (date) => {
  const day = date.getDay()
  return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
</script>

Vue Date Picker Component

Date Picker

Available in Other JavaScript Frameworks

About

Example

Days

vModel

With timepicker

With footer

Weeks

Months

Quarters

Years

Sizing

Disabled

Readonly

Preview date on hover

Disabled dates

Disabling weekends

Non-english locale

Auto

Chinese

Japanese

Korean

Right to left support

Hebrew

Persian

Custom formats

With timepicker

Weeks

Months

Years