Vue Datepicker

Appearance

On this page

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>

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>

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

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

  • Type: boolean | number | string
  • 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>

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>

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>

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>

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>

text-input ​

When enabled, will try to parse the date from the user input. You can also adjust the default behavior by providing text-input-options

Text input works with all picker modes.

  • Type: boolean
  • 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>

inline ​

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

  • Type: boolean
  • 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>

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>

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>

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>

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>

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>

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>

Released under the MIT License.

Copyright © 2021-present Vuepic