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

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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<template>
    <VueDatePicker v-model="date" :range="{ maxRange: 14, minMaxRawRange: true }" />
</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: []

interface PresetDate {
  label: string;
  value: Date[] | string[] | Date | string;
  style?: Record<string, string>;
  slot?: string;
  noTz?: boolean;
  testId?: string;
}

Code Example

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

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:

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

<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

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

interface TextInputOptions {
    enterSubmit?: boolean;
    tabSubmit?: boolean;
    openMenu?: 'open' | 'toggle' | boolean;
    rangeSeparator?: string;
    selectOnFocus?: boolean;
    format?: string | string[] | ((value: string) => Date | null);
}

• Default: { enterSubmit: true, tabSubmit: true, openMenu: 'open', 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: open value will keep the menu in the open state when the input field is clicked, toggle will toggle the menu, false disables menu from opening
• 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

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

interface InlineOptions {
    input?: boolean;
}

• Default: { input: false }

Code Example

<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

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

limit

Limit the number of dates to select

• Default: null

Code Example

<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

<template>
  <VueDatePicker v-model="date" :multi-dates="{ dragSelect: false }" />
</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

<template>
  <VueDatePicker v-model="date" auto-apply partial-flow :flow="['calendar', 'time']" />
</template>

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

const date = ref();
</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

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

<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

<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

<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

<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

<template>
    <VueDatePicker v-model="date" :timezone="{ convertModel: false, timezone: 'UTC' }" />
</template>

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

const date = ref();
</script>