Vue Datepicker

Appearance

Modes configuration ​

Props for configuring and extending the datepicker when using a specific mode

Info

  • If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, textInput as text-input and so on

range configuration ​

Providing configuration object will automatically enable range picker

ts
interface RangeConfig {
    noDisabledRange?: boolean;
    showLastInRange?: boolean;
    minMaxRawRange?: boolean;
    partialRange?: boolean;
    disableTimeRangeValidation?: boolean;
    fixedStart?: boolean;
    fixedEnd?: boolean;
    maxRange?: string | number;
    minRange?: string | number;
    autoRange?: string | number;
}

autoRange ​

Predefine range to select

  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ autoRange: 5 }" />
</template>

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

const date = ref();
</script>

partialRange ​

This option is enabled by default, meaning, two dates are not required for range input. If no second date is selected, the value will be null

  • Default: true
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ partialRange: false }" />
</template>

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

const date = ref();
</script>

minRange ​

Set minimal range available for selection. This is the number of days between the selected start and end date

  • Default: undefined
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ minRange: 3 }" />
</template>

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

const date = ref();
</script>

maxRange ​

Set maximal range available for selection. This is the number of days between the selected start and end date

  • Default: undefined
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ maxRange: 7 }" />
</template>

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

const date = ref();
</script>

fixedStart ​

Allows only adjustment of the second date in the defined range

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixedEnd

  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ fixedStart: true }" :clearable="false" />
</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>

fixedEnd ​

Allows only adjustment of the first date in the defined range

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixedStart

  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ fixedEnd: true }" :clearable="false" />
</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>

showLastInRange ​

By default, when the range is selected, calendar view will remain on the last selection, to return to the first selected date, disable this option

  • Default: true
Code Example
vue
<template>
  <VueDatePicker v-model="date" :range="{ showLastInRange: false }" />
</template>

<script setup>
import { ref } 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>

noDisabledRange ​

Prevents range selection if the range includes disabled dates

  • Default: false
Code Example
vue
<template>
    <VueDatePicker 
        v-model="date" 
        :range="{ noDisabledRange: true }"
        :disabled-dates="disabledDates"
    />
</template>

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

const date = ref(new Date());

const disabledDates = [subDays(new Date(), 1), new Date(), addDays(new Date(), 1)];
</script>

disableTimeRangeValidation ​

Explicitly allow end time in range mode to be before the start time

  • Default: false
Code Example
vue
<template>
    <VueDatePicker 
      v-model="time" 
      time-picker
      :range="{ disableTimeRangeValidation: true }"
      placeholder="Select Time"
    />
</template>

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

const time = ref();
</script>

minMaxRawRange ​

When using disabled dates with minRange or mixRange, disabled dates are not calculated within, setting this option to true will validate all dates

  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" :range="{ maxRange: 14, minMaxRawRange: true }" />
</template>

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

const date = ref();
</script>

partial-range ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

This prop is enabled by default, meaning, two dates are not required for range input. If no second date is selected, the value will be null

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <VueDatePicker v-model="date" range :partial-range="false" />
</template>

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

const date = ref();
</script>

preset-dates ​

When configured, it will provide a sidebar with configured range/date that user can select

Info

  • If the timezone prop is provided, values from preset dates will be converted to the provided timezone. If you don't want that, pass noTz: true to all presets
  • testId (if provided) will add data-test attribute on the preset button
  • Type: PresetDate[]
  • Default: []
ts
interface PresetDate {
  label: string;
  value: Date[] | string[] | Date | string;
  style?: Record<string, string>;
  slot?: string;
  noTz?: boolean;
  testId?: string;
}
Code Example
vue
<template>
    <VueDatePicker v-model="date" range :preset-dates="presetDates">
      <template #preset-date-range-button="{ label, value, presetDate }">
        <span 
            role="button"
            :tabindex="0"
            @click="presetDate(value)"
            @keyup.enter.prevent="presetDate(value)"
            @keyup.space.prevent="presetDate(value)">
          {{ label }}
        </span>
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';
import { endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths } from 'date-fns';

const date = ref();

const presetDates = ref([
  { label: 'Today', value: [new Date(), new Date()] },
  {
    label: 'Today (Slot)',
    value: [new Date(), new Date()],
    slot: 'preset-date-range-button'
  },
  { label: 'This month', value: [startOfMonth(new Date()), endOfMonth(new Date())] },
  {
    label: 'Last month',
    value: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
  },
  { label: 'This year', value: [startOfYear(new Date()), endOfYear(new Date())] },
]);
</script>

min-range ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

Set minimal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

  • Type: number | string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" range min-range="3" />
</template>

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

const date = ref();
</script>

max-range ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

Set maximal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

  • Type: number | string
  • Default: null
Code Example
vue
<template>
    <VueDatePicker v-model="date" range max-range="7" />
</template>

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

const date = ref();
</script>

fixed-start ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

Allows only adjustment of the second date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixed-end

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" range fixed-start :clearable="false" />
</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>

fixed-end ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

Allows only adjustment of the first date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixed-start

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <VueDatePicker v-model="date" range fixed-end :clearable="false" />
</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 configuration ​

multi-calendars prop can be extended with the configuration object, instead of passing a boolean or number values, you can provide an object. When the object is provided, prop will be auto enabled.

  • Type:
ts
interface MultiCalendarsOptions {
    solo?: boolean;
    static?: boolean;
    count?: string | number;
}
  • Default: { solo: false, static: true, count: 2 }

solo ​

When enabled, both calendars will be independent of each other

Code Example
vue
<template>
    <VueDatePicker v-model="date" range :multi-calendars="{ solo: true }" />
</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>

static ​

The default calendar view when using multi-calendars is to keep it on the month selected by the user. When this prop is disabled, it will auto-update the first calendar when the range starts and adjust the rest of them based on the first month

Code Example
vue
<template>
    <VueDatePicker v-model="date" range :multi-calendars="{ static: false }" />
</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>

text-input configuration ​

Configuration for text-input prop. When the configuration object is provided, text-input is auto enabled

  • Type:
ts
interface TextInputOptions {
    enterSubmit?: boolean;
    tabSubmit?: boolean;
    openMenu?: boolean;
    rangeSeparator?: string;
    selectOnFocus?: boolean;
    format?: string | string[] | ((value: string) => Date | null);
}
  • Default: { enterSubmit: true, tabSubmit: true, openMenu: true, rangeSeparator: '-' }

Properties explanation:

  • enterSubmit: When enabled, pressing enter will select a date if the input value is a valid date object
  • tabSubmit: When enabled, pressing tab will select a date if the input value is a valid date object
  • openMenu: When enabled, opens the menu when clicking on the input field
  • format: Override the default parsing format. Default is the string value from format. You can also pass multiple parser patterns or a custom parser function and parse the input yourself. When the input is focused, the date will be shown in this format.
  • rangeSeparator: If you use range mode, the default separator is -, you can change it here
  • selectOnFocus: Selects the input text when input is focused
Code Example
vue
<template>
    <VueDatePicker 
      v-model="date"
      placeholder="Start Typing ..."
      :text-input="textInputOptions" />
</template>

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

const date = ref();
const textInputOptions = {
  format: 'MM.dd.yyyy HH:mm'
};
</script>

inline configuration ​

Use input with the inline mode, useful if you enable text-input. When the configuration object is provided, inline prop is auto enabled

  • Type:
ts
interface InlineOptions {
    input?: boolean;
}
  • Default: { input: false }
Code Example
vue
<template>
    <VueDatePicker v-model="date" :inline="{ input: true }" text-input auto-apply />
</template>

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

const date = ref();
</script>

multi-dates configuration ​

Configure additional behaviour for multi-dates mode

ts
interface MultiDatesConfig {
    limit?: number | string;
    dragSelect?: boolean;
}

limit ​

Limit the number of dates to select

  • Default: null
Code Example
vue
<template>
  <VueDatePicker v-model="date" :multi-dates="{ limit: 3 }" />
</template>

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

const date = ref();
</script>

dragSelect ​

Allows selecting multiple dates by dragging the mouse over the calendar cells

  • Default: true
Code Example
vue
<template>
  <VueDatePicker v-model="date" :multi-dates="{ dragSelect: false }" />
</template>

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

const date = ref();
</script>

multi-dates-limit ​

Deprecation warning

This prop is deprecated, please refer to multi-dates configuration section

Limit the number of dates to select when multi-dates is enabled

  • Type: number | string
  • Default: null
Code Example
vue
<template>
  <VueDatePicker v-model="date" multi-dates multi-dates-limit="3" />
</template>

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

const date = ref();
</script>

partial-flow ​

When combined with the auto-apply prop, it will set the date as soon as the date is selected without waiting for last flow step to execute

  • Type: boolean
  • Default: false
Code Example
vue
<template>
  <VueDatePicker v-model="date" auto-apply partial-flow :flow="['calendar', 'time']" />
</template>

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

const date = ref();
</script>

show-last-in-range ​

Deprecation warning

This prop is deprecated, please refer to range configuration section

By default, when the range is selected, calendar view will remain on the last selection, to return to the first selected date, disable this option

  • Type: boolean
  • Default: true
Code Example
vue
<template>
  <VueDatePicker v-model="date" range :show-last-in-range="false" />
</template>

<script setup>
import { ref } 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>

timezone configuration ​

Configure the timezone conversion behaviour for props that are providing the dates, such as min-date, max-date, disabled-dates and so on

ts
interface TimeZoneConfig {
  timezone?: string;
  exactMatch?: boolean;
  dateInTz?: string;
  emitTimezone?: string;
  convertModel?: boolean;
}

timezone ​

Same as timezone string prop type, define a timezone for the datepicker

  • Default: undefined
Timezone: UTC
Offset: 0
Code Example
vue
<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>

exactMatch ​

When enabled, it will not convert date to the given timezone. If you are providing the Date object, it will remain as is, while UTC string, will be converted to the local timezone

  • Default: false
Timezone: UTC
Offset: 0
Code Example
vue
<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>
  const date = ref();
  const selectedTz = ref(11);

  const timezone = ref({ timezone: undefined, exactMatch: true })

  /**
   * Let's assume we are in the timezone GMT+1
   * Provided timezone is UTC which is -1 hour from our local timezone
   * By setting `exactMatch` property, our maxDate will remain as is
   * If we set `exactMatch: false`, our maxDate will be new Date() -/+ offset
   */
  const maxDate = new Date();

  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>

dateInTz ​

This property is checked only if exactMatch is set to true, meaning that if you provide the date from some other timezone other than local, and want that date to be the same, you'll need to provide the original date timezone

  • Default: undefined
Timezone: UTC
Offset: 0
Code Example
vue
<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>
  const date = ref();
  const selectedTz = ref(11);

  const timezone = ref({ timezone: undefined, exactMatch: true, dateInTz: 'UTC' })

  /**
   * Let's assume we are in the timezone GMT+1
   * Provided timezone is UTC which is -1 hour from our local timezone
   * By setting `exactMatch` property, we want to keep the date intact
   * However, in this case, our `maxDate` is a UTC string, when parsed,
   * will be automatically converted to a browser timezone
   * To prevent this behaviour, we need to set `dateInTz`
   * so that picker can adjust the timezone offset
   */
  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>

emitTimezone ​

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

  • Default: undefined
Timezone: UTC
Offset: 0
Code Example
vue
<template>
  <div class="tz-demo-wrap">
    <div class="dp-container-wrap">
      <VueDatePicker
        v-model="date"
        :dark="isDark"
        :timezone="tz"
        inline
        auto-apply
        @update:model-timezone-value="setZonedDate"
      />
    </div>
    <div class="tz-range-slider-wrap">
      <div>
        <span>Timezone: {{ activeTz.tz }}</span>
        <br />
        <span>Offset: {{ activeTz.offset > 0 ? `+${activeTz.offset}` : activeTz.offset }}</span>
        <br>
        <span v-if="zonedDate">Zoned date: {{zonedDate}}</span>
      </div>
      <div>
        <input class="tz-range-slider" type="range" v-model="selectedTz" min="0" max="22" />
      </div>
    </div>
  </div>
</template>

<script setup>
  const date = ref();
  const selectedTz = ref(11);

  const timezone = ref({ emitTimezone: undefined })
  const zonedDate = ref();

  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, emitTimezone: activeTz.value.tz };
  });
  
  const setZonedDate = (date) => {
    zonedDate.value = date.toISOString();;
  }
</script>

convertModel ​

Used to explicitly enable or disable v-model value conversion in a given timezone

  • Default: true
Code Example
vue
<template>
    <VueDatePicker v-model="date" :timezone="{ convertModel: false, timezone: 'UTC' }" />
</template>

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

const date = ref();
</script>

Released under the MIT License.

Copyright © 2021-present Vuepic