Vue Datepicker

Appearance

General configuration ​

General behavior props configuration

Info

  • When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
  • If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, monthChangeOnScroll as month-change-on-scroll and so on

uid ​

Pass an id to the input and menu elements. If provided, you can select menu id as dp-menu-${uid} and input id as dp-input-${uid}

  • Type: string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" uid="demo" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" uid="demo" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

month-change-on-scroll ​

Scrolling the mouse wheel over the calendar will change the month. Scroll down for next month and vice versa

You can also set the value to 'inverse', so that scrolling down will go to the previous month and up on the next

  • Type: boolean | 'inverse'
  • Default: true
Code Example
vue
<template>
    <VueDatePicker v-model="date" :month-change-on-scroll="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :month-change-on-scroll="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

model-value v-model ​

v-model binding

  • Type:
    • Single picker: Date | string
      • In case of multiDates it will be Date[] | string[]
    • Month picker: { month: number | string; year: number | string }
    • Time picker: { hours: number | string; minutes: number | string; seconds?: number | string }
    • Week picker: [Date, Date] | [string, string]
    • Range picker: [Date, Date] | [string | string]
      • If you use time picker, it will be { hours: number | string; minutes: number | string; seconds?: number | string }[]
      • If you use month picker, it will be { month: number | string; year: number | string }[]
    • Year picker: number | string
    • Quarter picker: Same as single or range pickers
  • Default: null
Code Example
vue
<template>
   <div>
       <VueDatePicker id="manual" :model-value="date" @update:model-value="setDate" />
       <VueDatePicker id="auto" v-model="date" />
   </div>
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

const setDate = (value) => {
  date.value = value;
}
</script>
<template>
   <div>
       <VueDatePicker id="manual" :model-value="date" @update:model-value="setDate" />
       <VueDatePicker id="auto" v-model="date" />
   </div>
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

const setDate = (value) => {
  date.value = value;
}
</script>

model-type ​

Specify a custom format for v-model

  • Type: 'timestamp' | 'format' | string
  • Default: null

Note

  • timestamp - uses timestamp for binding
  • format - uses provided format or fallbacks to the default one. Must be a string
  • string - use custom format by providing a custom pattern with unicode tokens

This is only compatible with date pickers, time-picker and month-picker, other modes are not supported

Code Example
vue
<template>
    <VueDatePicker v-model="date" model-type="dd.MM.yyyy" />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" model-type="dd.MM.yyyy" />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

clearable ​

Add a clear icon to the input field where you can set the value to null

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <VueDatePicker v-model="date" :clearable="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :clearable="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

auto-apply ​

If set to true, clicking on a date value will automatically select the value

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" auto-apply />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" auto-apply />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

placeholder ​

Input placeholder

  • Type: string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

no-today ​

Hide today mark from the calendar

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" no-today />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" no-today />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

markers ​

Add markers to the specified dates with (optional) tooltips. For color options, you can use any css valid color.

  • Type: Markers[]
  • Default: []
ts
interface Markers {
    date: Date | string;
    type?: 'dot' | 'line';
    tooltip?: { text: string; color?: string;}[];
    color?: string;
}
interface Markers {
    date: Date | string;
    type?: 'dot' | 'line';
    tooltip?: { text: string; color?: string;}[];
    color?: string;
}
Code Example
vue

<template>
    <VueDatePicker v-model="date" :markers="markers" />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

<template>
    <VueDatePicker v-model="date" :markers="markers" />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

highlight ​

Specify highlighted dates

  • Type: HighlightProp
  • Default: null

Warning

Array type for the highlight prop is deprecated, you should use highlight.dates

ts
interface Highlight {
    dates: Date[];
    years: number[];
    months: { month: number; year: number }[];
    quarters: { quarter: number; year: number }[];
    weekdays: number[];
    options: { highlightDisabled: boolean };
}

type HighlightFn = ((date: Date) => boolean)
    | ((month: { month: number; year: number }) => boolean)
    | ((yearOrWeekDay: number) => boolean)
    | ((quarter: { quarter: number; year: number }) => boolean);

type HighlightProp = Date[] 
    | string[] // deprecated
    | number[] // deprecated
    | HighlightFn
    | Partial<Highlight>;
interface Highlight {
    dates: Date[];
    years: number[];
    months: { month: number; year: number }[];
    quarters: { quarter: number; year: number }[];
    weekdays: number[];
    options: { highlightDisabled: boolean };
}

type HighlightFn = ((date: Date) => boolean)
    | ((month: { month: number; year: number }) => boolean)
    | ((yearOrWeekDay: number) => boolean)
    | ((quarter: { quarter: number; year: number }) => boolean);

type HighlightProp = Date[] 
    | string[] // deprecated
    | number[] // deprecated
    | HighlightFn
    | Partial<Highlight>;
Code Example
vue
<template>
    <VueDatePicker v-model="date" :highlight="highlightedDates" />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const highlightedDates = ref([
  addDays(new Date(), 1),
  addDays(new Date(), 2),
  addDays(new Date(), 3),
])

</script>
<template>
    <VueDatePicker v-model="date" :highlight="highlightedDates" />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const highlightedDates = ref([
  addDays(new Date(), 1),
  addDays(new Date(), 2),
  addDays(new Date(), 3),
])

</script>

highlight-week-days ​

Deprecated

This prop is deprecated, please use highlight.weekdays prop instead

Specify highlighted days of the week

  • Type: number[]
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" :highlight-week-days="[0, 6]" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :highlight-week-days="[0, 6]" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

highlight-disabled-days ​

Deprecated

This prop is deprecated, please use highlight.options prop instead

Keep disabled dates highlighted. By default, highlighted dates, if disabled, are marked as disabled

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker 
        v-model="date" 
        :highlight="highlightedDates"
        :disabled-dates="highlightedDates"
        highlight-disabled-days
    />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const highlightedDates = ref([
  addDays(new Date(), 1),
  addDays(new Date(), 2),
  addDays(new Date(), 3),
])
</script>
<template>
    <VueDatePicker 
        v-model="date" 
        :highlight="highlightedDates"
        :disabled-dates="highlightedDates"
        highlight-disabled-days
    />
</template>

<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

const date = ref(new Date());
const highlightedDates = ref([
  addDays(new Date(), 1),
  addDays(new Date(), 2),
  addDays(new Date(), 3),
])
</script>

disabled ​

Disables the input

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" disabled />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" disabled />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

readonly ​

Sets the input in readonly state

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" readonly />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" readonly />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

required ​

Add required flag to the input field. Use with form tag for built-in validation

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <form @submit.prevent="submitForm">
      <VueDatePicker v-model="date" required />
      <button type="submit">Submit form</button>
    </form>
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

const submitForm = () => {
  alert('Form submitted');
}
</script>
<template>
    <form @submit.prevent="submitForm">
      <VueDatePicker v-model="date" required />
      <button type="submit">Submit form</button>
    </form>
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

const submitForm = () => {
  alert('Form submitted');
}
</script>

name ​

Sets the input name attribute

  • Type: string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" name="date-picker" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" name="date-picker" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

autocomplete ​

Sets the input autocomplete attribute

  • Type: string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" autocomplete="off" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" autocomplete="off" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

hide-navigation ​

Hide navigation buttons from the overlays

  • Type: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
  • Default: []
Code Example
vue
<template>
    <VueDatePicker v-model="date" :hide-navigation="['month', 'year']" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :hide-navigation="['month', 'year']" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

action-row ​

Control which buttons are shown in the action row

  • Type: ActionRow
  • Default: { showSelect: true, showCancel: true, showNow: false, showPreview: true }
ts
interface ActionRow {
 showSelect?: boolean;
 showCancel?: boolean;
 showNow?: boolean;
 showPreview?: boolean;
}
interface ActionRow {
 showSelect?: boolean;
 showCancel?: boolean;
 showNow?: boolean;
 showPreview?: boolean;
}
Code Example
vue
<template>
    <VueDatePicker v-model="date" :action-row="{ showNow: true, showPreview: false }" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :action-row="{ showNow: true, showPreview: false }" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

disable-year-select ​

Removes the year button from the menu and cycles trough the current or provided year

Code Example
vue
<template>
    <VueDatePicker v-model="date" disable-year-select />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" disable-year-select />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

year-first ​

Reverse button order in the calendar header

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" year-first />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" year-first />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

config ​

General configuration for customizing specific date picker behaviour

  • Type: Config
ts
interface Config {
    allowStopPropagation?: boolean;
    closeOnScroll?: boolean;
    modeHeight?: number;
    allowPreventDefault?: boolean;
    closeOnClearValue?: boolean;
    closeOnAutoApply?: boolean;
    noSwipe?: boolean;
    keepActionRow?: boolean;
    onClickOutside?: (validate: () => boolean) => void;
}
interface Config {
    allowStopPropagation?: boolean;
    closeOnScroll?: boolean;
    modeHeight?: number;
    allowPreventDefault?: boolean;
    closeOnClearValue?: boolean;
    closeOnAutoApply?: boolean;
    noSwipe?: boolean;
    keepActionRow?: boolean;
    onClickOutside?: (validate: () => boolean) => void;
}
  • Default: config
ts
const config = {
    allowStopPropagation: true,
    closeOnScroll: false,
    modeHeight: 255,
    allowPreventDefault: false,
    closeOnClearValue: true,
    closeOnAutoApply: true,
    noSwipe: false,
    keepActionRow: false,
    onClickOutside: undefined,
}
const config = {
    allowStopPropagation: true,
    closeOnScroll: false,
    modeHeight: 255,
    allowPreventDefault: false,
    closeOnClearValue: true,
    closeOnAutoApply: true,
    noSwipe: false,
    keepActionRow: false,
    onClickOutside: undefined,
}
  • allowStopPropagation: Enable event.sportPropagation on click events
  • closeOnScroll: Close datepicker menu on page scroll
  • modeHeight: If you use month-picker, time-picker or year-picker, set custom height of the picker in px
  • allowPreventDefault: Due to the different implementations of how click outside listeners are implemented, you might encounter issues where the menu closes if the picker is used in dialogs when teleport prop is enabled. To prevent this issue, you need to set this option to true
  • closeOnClearValue: Prevent closing the menu on value clear from the input field
  • closeOnAutoApply: If set to false, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again
  • noSwipe: Disable touch events on the calendar
  • keepActionRow: When enabled, it will keep the action row even if the auto-apply prop is enabled
  • onClickOutside: Provide custom click outside handler. Exposed validation function that will return true or false depending on the selected value

Released under the MIT License.

Copyright © 2021-present Vuepic