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

<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

<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 }[]
    • If you use week-picker, it will be [[Date, Date], [Date, Date]]
  • Year picker: number | string
  • Quarter picker: Same as single or range pickers
• Default: null

Code Example

<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
• iso - date that will be returned will be in iso string format
• 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

<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

<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

Info

When auto-apply is used in combination with flow, to select date if flow is broken, you need to set partial-flow prop to true

Code Example

<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

<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

<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: []

interface Markers {
    date: Date | string;
    type?: 'dot' | 'line';
    tooltip?: { text: string; color?: string;}[];
    color?: string;
    // el is a HTML element of a calendar cell
    customPosition?: (el: HTMLElement) => Record<string, string | number>;
}

Code Example

<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: HighlightFn | Partial<Highlight>;
• Default: null

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

Code Example

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

disabled

Disables the input

• Type: boolean
• Default: false

Code Example

<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

<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

<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

<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

<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

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

interface ActionRow {
 showSelect?: boolean;
 showCancel?: boolean;
 showNow?: boolean;
 showPreview?: boolean;
}

Code Example

<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

<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

<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

interface Config {
    allowStopPropagation?: boolean;
    closeOnScroll?: boolean;
    modeHeight?: number;
    allowPreventDefault?: boolean;
    closeOnClearValue?: boolean;
    closeOnAutoApply?: boolean;
    noSwipe?: boolean;
    keepActionRow?: boolean;
    onClickOutside?: (validate: () => boolean) => void;
    tabOutClosesMenu?: boolean;
    arrowLeft?: string;
    keepViewOnOffsetClick?: boolean;
    timeArrowHoldThreshold?: number;
    shadowDom?: boolean;
}

• Default: config

const config = {
    allowStopPropagation: true,
    closeOnScroll: false,
    modeHeight: 255,
    allowPreventDefault: false,
    closeOnClearValue: true,
    closeOnAutoApply: true,
    noSwipe: false,
    keepActionRow: false,
    onClickOutside: undefined,
    tabOutClosesMenu: true,
    arrowLeft: undefined,
    keepViewOnOffsetClick: false,
    timeArrowHoldThreshold: 0,
    shadowDom: false,
}

• 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
• tabOutClosesMenu: When tabbing out of the picker menu it will close the picker menu (not compatible when using teleport)
• arrowLeft: Overrides default arrow position from left side of the menu. To keep it always in the center, set it to 50%. Accepts valid CSS value
• keepViewOnOffsetClick: When enabled, clicking on the offset date will not change the month that is currently in the view
• timeArrowHoldThreshold: When provided with a value > 0, clicking and holding the arrow button in the time-picker will increment/decrement the value. This value represents the setTimeout value, meaning the larger the number, the change will be slower.0 disables the hold event
• shadowDom: Set to true if you are using the component with web components

loading

Adds a loading overlay in the menu

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" loading />
</template>

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

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