Modes

Set the default mode for the datepicker

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, autoRange as auto-range and so on

Info

Depending on the mode, v-model might be different, so make sure to use the proper configuration

range

Range picker mode

Type: boolean
Default: false

Code Example

vue

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

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

const date = ref();

// For demo purposes assign range from the current date
onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
})
</script>

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

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

const date = ref();

// For demo purposes assign range from the current date
onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
})
</script>

auto-range

Predefine range to select

Info

range prop must be enabled

Type: number | string
Default: null

Code Example

vue

<template>
    <VueDatePicker v-model="date" range auto-range="5" />
</template>

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

const date = ref();
</script>

<template>
    <VueDatePicker v-model="date" range auto-range="5" />
</template>

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

const date = ref();
</script>

multi-calendars

Enabling this prop will show multiple calendars side by side (on mobile devices, they will be in a column layout) for range picker. You can also pass a number to show more calendars. If you pass true, 2 calendars will be shown automatically.

Info

If the MultiCalendarsOptions object is provided, multi-calendars are auto enabled. For more info take a look at multi-calendars configuration section.

This mode is not supported with year-picker and time-picker

Type: boolean | number | string | MultiCalendarsOptions
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" range multi-calendars />
</template>

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

const date = ref();

onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
})
</script>

<template>
    <VueDatePicker v-model="date" range multi-calendars />
</template>

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

const date = ref();

onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
})
</script>

month-picker

Change datepicker mode to select only month and year

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="month" month-picker />
</template>

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

const month = ref({
  month: new Date().getMonth(),
  year: new Date().getFullYear()
});
</script>

<template>
    <VueDatePicker v-model="month" month-picker />
</template>

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

const month = ref({
  month: new Date().getMonth(),
  year: new Date().getFullYear()
});
</script>

time-picker

Change datepicker mode to select only time

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="time" time-picker />
</template>

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

const time = ref({
  hours: new Date().getHours(),
  minutes: new Date().getMinutes()
});
</script>

<template>
    <VueDatePicker v-model="time" time-picker />
</template>

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

const time = ref({
  hours: new Date().getHours(),
  minutes: new Date().getMinutes()
});
</script>

year-picker

Change datepicker mode to select only year

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="year" year-picker />
</template>

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

const year = ref(new Date().getFullYear());
</script>

<template>
    <VueDatePicker v-model="year" year-picker />
</template>

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

const year = ref(new Date().getFullYear());
</script>

week-picker

Select a specific week range

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" week-picker />
</template>

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

const date = ref();
</script>

<template>
    <VueDatePicker v-model="date" week-picker />
</template>

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

const date = ref();
</script>

quarter-picker

Change datepicker mode to select a quarter

Warning

When working with the quarter-picker, you will receive date(s) in the v-model. Each date will be the first date of the quarter. When using validation for min or max dates, disabled dates and so on, use a first date of the targeted quarter

Info

By default, quarter item displays first and last month of the quarter, to change locale of the displayed value, you can use format-locale prop or custom quarter slot

Type: boolean
Default: false

Code Example

vue

<template>
  <VueDatePicker v-model="quarter" quarter-picker />
</template>

<script setup>
  import {ref} from 'vue';
  import { startOfQuarter } from "date-fns";

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

<template>
  <VueDatePicker v-model="quarter" quarter-picker />
</template>

<script setup>
  import {ref} from 'vue';
  import { startOfQuarter } from "date-fns";

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

text-input

When enabled, will try to parse the date from the user input.

Info

Text input works with all picker modes.

If the TextInputOptions object is provided, text-input is auto enabled. For more info take a look at text-input configuration section.

Type: boolean | TextInputOptions
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" placeholder="Start Typing ..." text-input />
</template>

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

const date = ref();
</script>

<template>
    <VueDatePicker v-model="date" placeholder="Start Typing ..." text-input />
</template>

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

const date = ref();
</script>

inline

Removes the input field and places the calendar in your parent component

Info

Text input works with all picker modes.

If the InlineOptions object is provided, inline is auto enabled. For more info take a look at inline configuration section.

Type: boolean | InlineOptions
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" inline auto-apply />
</template>

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

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

<template>
    <VueDatePicker v-model="date" inline auto-apply />
</template>

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

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

multi-dates

Allow selecting multiple single dates. When changing time, the latest selected date is affected. To deselect the date, click on the selected value

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" multi-dates />
</template>

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

const date = ref();
</script>

<template>
    <VueDatePicker v-model="date" multi-dates />
</template>

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

const date = ref();
</script>

flow

Define the selecting order. Position in the array will specify the execution step. When you overwrite the execution step, the flow is reset

Type: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
Default: []

Info

flow is not supported with multi-calendars mode

Code Example

vue

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

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

const date = ref();
const flow = ref(['month', 'year', 'calendar']);
</script>

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

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

const date = ref();
const flow = ref(['month', 'year', 'calendar']);
</script>

utc

Output date(s) will be in UTC timezone string. You can use this if you gather dates from different timezones and want to send the date directly to the server

Type: boolean | 'preserve'
Default: false

Info

preserve - The input date will be the same, meaning, that it will not convert the date in the local timezone, but preserve the original UTC time.
true - The input date will be converted to the local timezone. Output date will be in the UTC format. Meaning that what is the actual v-model and what is displayed in the picker will be in the timezone difference.

Code Example

vue

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

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

const date = ref();
</script>

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

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

const date = ref();
</script>

vertical

Sets the datepicker orientation in the vertical mode. This mode will change the arrow action from left/right to the top/bottom, transitions will also be vertical

Type: boolean
Default: false

Code Example

vue

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

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

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

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

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

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

model-auto

Automatically switch between range and single picker modes

Type: Boolean
Default: false

Note

Since this prop in the background uses a partial-range make sure that range prop is provided and keep partial-range to true

This is only compatible with date pickers, specific modes are not supported

Code Example

vue

<template>
    <VueDatePicker v-model="date" model-auto range />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

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

const date = ref();
</script>

<template>
    <VueDatePicker v-model="date" model-auto range />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

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

const date = ref();
</script>

timezone

Display the dates in a given timezone

Type: string
Default: null

Note

timezone is only supported with the date picker and not other modes for now
For supported timezones please refer to date-fns-tz

Code Example

vue

<template>
    <select name="timezone-select" id="timezone-select" v-model="timezone">
      <option :value="undefined">Select timezone</option>
      <option v-for="zone in timezones" :value="zone" :key="zone">{{ zone }}</option>
    </select>
    <VueDatePicker 
            v-model="date" 
            multi-calendars
            range
            :timezone="timezone"
            :partial-range="false" />
</template>

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

const date = ref([new Date(), addDays(new Date(), 5)]);
const timezone = ref(undefined);

// These are just for the demo purposes
const timezones = [
  'Pacific/Midway', // -11
  'America/Adak', // -10,
  'Pacific/Gambier', // -9
  'America/Los_Angeles', // -8
  'America/Denver', // -7
  'America/Chicago', // -6
  'America/New_York', // -5
  'America/Santiago', // -4
  'America/Sao_Paulo', // -3
  'America/Noronha', // -2
  'Atlantic/Cape_Verde', // -1
  'UTC', // utc
  'Europe/Brussels', //+1
  'Africa/Cairo', // +2
  'Europe/Minsk', // +3
  'Europe/Moscow', // +4
  'Asia/Tashkent', // +5
  'Asia/Dhaka', // +6
  'Asia/Novosibirsk', // +7
  'Australia/Perth', // +8
  'Asia/Tokyo', // +9
  'Australia/Hobart', // +10
  'Asia/Vladivostok', // +11
  'Pacific/Auckland', // +12
];
</script>

<template>
    <select name="timezone-select" id="timezone-select" v-model="timezone">
      <option :value="undefined">Select timezone</option>
      <option v-for="zone in timezones" :value="zone" :key="zone">{{ zone }}</option>
    </select>
    <VueDatePicker 
            v-model="date" 
            multi-calendars
            range
            :timezone="timezone"
            :partial-range="false" />
</template>

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

const date = ref([new Date(), addDays(new Date(), 5)]);
const timezone = ref(undefined);

// These are just for the demo purposes
const timezones = [
  'Pacific/Midway', // -11
  'America/Adak', // -10,
  'Pacific/Gambier', // -9
  'America/Los_Angeles', // -8
  'America/Denver', // -7
  'America/Chicago', // -6
  'America/New_York', // -5
  'America/Santiago', // -4
  'America/Sao_Paulo', // -3
  'America/Noronha', // -2
  'Atlantic/Cape_Verde', // -1
  'UTC', // utc
  'Europe/Brussels', //+1
  'Africa/Cairo', // +2
  'Europe/Minsk', // +3
  'Europe/Moscow', // +4
  'Asia/Tashkent', // +5
  'Asia/Dhaka', // +6
  'Asia/Novosibirsk', // +7
  'Australia/Perth', // +8
  'Asia/Tokyo', // +9
  'Australia/Hobart', // +10
  'Asia/Vladivostok', // +11
  'Pacific/Auckland', // +12
];
</script>

emit-timezone

Enables the @update:model-timezone-value event that will dispatch a v-model value in a given timezone

Type: string
Default: null

Code Example

vue

<template>
  <VueDatePicker
      v-model="date"
      emit-timezone="UTC"
      @update:model-timezone-value="setUTCDate"
  />
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    const date = ref();
    const utcDate = ref();

    const setUTCDate = (value) => {
        utcDate.value = value;
    };
</script>

<template>
  <VueDatePicker
      v-model="date"
      emit-timezone="UTC"
      @update:model-timezone-value="setUTCDate"
  />
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    const date = ref();
    const utcDate = ref();

    const setUTCDate = (value) => {
        utcDate.value = value;
    };
</script>

Modes ​

range ​

auto-range ​

multi-calendars ​

month-picker ​

time-picker ​

year-picker ​

week-picker ​

quarter-picker ​

text-input ​

inline ​

multi-dates ​

flow ​

utc ​

vertical ​

model-auto ​

timezone ​

emit-timezone ​

Modes

range

auto-range

multi-calendars

month-picker

time-picker

year-picker

week-picker

quarter-picker

text-input

inline

multi-dates

flow

utc

vertical

model-auto

timezone

emit-timezone