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,multiCalendars
asmulti-calendars
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 | RangeConfig
- Default:
false
Info
If the RangeConfig
object is provided, range
is auto enabled.
For more info about range
configuration properties, please refer to range
configuration section
Code Example
<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>
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
<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
<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
<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
<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
<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
<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
<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
<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 | MultiDatesConfig
- Default:
false
Info
- When configuration object is provided, prop is auto enabled
- For additional
multi-dates
configuration properties, please refer tomulti-dates
configuration section
Code Example
<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
<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 actualv-model
and what is displayed in the picker will be in the timezone difference.
Code Example
<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
<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 range.partialRange
make sure that range
prop is provided and keep range.partialRange
to true
This is only compatible with date pickers, specific modes are not supported
Code Example
<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. Datepicker always work in the clients timezone
, but when the timezone
prop is provided, the Date
object will adjust offset in the hours, remaining in the client timezone.
Info
Providing props that rely on the Date
object such as min-date
, max-date
, disabled-dates
and so on, will be converted to a provided timezone.
For more info about timezone
configuration properties, please refer to timezone
configuration section
- Type:
string | TimeZoneConfig
- Default:
null
Code Example
<template>
<div class="tz-demo-wrap">
<div class="dp-container-wrap">
<VueDatePicker
v-model="date"
:dark="isDark"
:timezone="tz"
inline
auto-apply
:max-date="maxDate"
/>
</div>
<div class="tz-range-slider-wrap">
<div>
<span>Timezone: {{ activeTz.tz }}</span>
<br />
<span>Offset: {{ activeTz.offset > 0 ? `+${activeTz.offset}` : activeTz.offset }}</span>
</div>
<div>
<input class="tz-range-slider" type="range" v-model="selectedTz" min="0" max="22" />
</div>
</div>
</div>
</template>
<script setup>
import { getMonth, getYear } from "date-fns";
const date = ref();
const selectedTz = ref(11);
const timezone = ref({ timezone: undefined })
const maxDate = computed(() => {
const month = getMonth(new Date()) + 1 > 9 ? getMonth(new Date()) + 1 : `0${getMonth(new Date()) + 1}`;
return `${getYear(new Date())}-${month}-15T01:00:00Z`;
});
const timezones = [
{ tz: 'Pacific/Midway', offset: -11 },
{ tz: 'America/Adak', offset: -10 },
{ tz: 'Pacific/Gambier', offset: -9 },
{ tz: 'America/Los_Angeles', offset: -8 },
{ tz: 'America/Denver', offset: -7 },
{ tz: 'America/Chicago', offset: -6 },
{ tz: 'America/New_York', offset: -5 },
{ tz: 'America/Santiago', offset: -4 },
{ tz: 'America/Sao_Paulo', offset: -3 },
{ tz: 'America/Noronha', offset: -2 },
{ tz: 'Atlantic/Cape_Verde', offset: -1 },
{ tz: 'UTC', offset: 0 },
{ tz: 'Europe/Brussels', offset: 1 },
{ tz: 'Africa/Cairo', offset: 2 },
{ tz: 'Europe/Minsk', offset: 3 },
{ tz: 'Europe/Moscow', offset: 4 },
{ tz: 'Asia/Tashkent', offset: 5 },
{ tz: 'Asia/Dhaka', offset: 6 },
{ tz: 'Asia/Novosibirsk', offset: 7 },
{ tz: 'Australia/Perth', offset: 8 },
{ tz: 'Asia/Tokyo', offset: 9 },
{ tz: 'Australia/Hobart', offset: 10 },
{ tz: 'Asia/Vladivostok', offset: 11 },
];
const activeTz = computed(() => timezones[selectedTz.value]);
const tz = computed(() => {
return { ...timezone.value, timezone: activeTz.value.tz };
});
</script>