Vue Datepicker

Appearance

On this page

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>

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>

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>

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>

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>

close-on-scroll ​

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>

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>

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>

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>

close-on-auto-apply ​

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>

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;
}
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>

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>

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>

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>

show-now-button ​

Deprecated

Please refer to actionRow prop to enable now button

Enable button to select current date and time

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

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

const date = ref();
</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>

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>

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>

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>

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>

keep-action-row ​

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>

no-swipe ​

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>

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>

on-click-outside ​

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>

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;
}
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>

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>

close-on-clear-value ​

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>

Released under the MIT License.

Copyright © 2021-present Vuepic