Skip to content

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

close-on-scroll

Deprecated

This option has been deprecated, please use config prop

Close datepicker menu on page scroll

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

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

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" close-on-scroll />
</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>

close-on-auto-apply

Deprecated

This option has been deprecated, please use config prop

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

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

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

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" auto-apply :close-on-auto-apply="false" />
</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: Date[] | string[] | number[] | ((date: Date) => boolean)
  • Default: []
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

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

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>

keep-action-row

Deprecated

This option has been deprecated, please use config prop

When enabled, it will keep the action row even if the auto-apply prop is enabled

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

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

const date = ref(new Date());
</script>
<template>
    <VueDatePicker 
        v-model="date"
        auto-apply
        keep-action-row
        :close-on-auto-apply="false"
    />
</template>

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

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

no-swipe

Deprecated

This option has been deprecated, please use config prop

Disable touch events on the calendar

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

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

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" no-swipe />
</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>

on-click-outside

Deprecated

This option has been deprecated, please use config prop

Provide custom click outside handler. Exposed validation function that will return true or false depending on the selected value

  • Type: (validate: () => boolean) => void
  • Default: null
Code Example
vue
<template>
    <VueDatePicker ref="dpRef" v-model="date" :on-click-outside="onClickOutside" />
</template>

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

const date = ref(new Date());
const dpRef = ref();

const onClickOutside = () => {
  if (dpRef.value) dpRef.value.closeMenu();
  alert('Click outside handler')
}
</script>
<template>
    <VueDatePicker ref="dpRef" v-model="date" :on-click-outside="onClickOutside" />
</template>

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

const date = ref(new Date());
const dpRef = ref();

const onClickOutside = () => {
  if (dpRef.value) dpRef.value.closeMenu();
  alert('Click outside handler')
}
</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>

close-on-clear-value

Deprecated

This option has been deprecated, please use config prop

Prevent closing the menu on value clear from the input field

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

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

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date" :close-on-clear-value="false" />
</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.