Modes configuration

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

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;
    autoSwitchStartEnd?: boolean; // v12.1+
}

autoRange

Predefine range to select

• Default: false

Code Example

<template>
  <VueDatePicker v-model="date" :range="{ autoRange: 5 }" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref, onMounted } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref, onMounted } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 }" :filters="{ weekDays: [1,2,3,4,5] }" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</script>

autoSwitchStartEnd v12.1+

By default, when selecting the second date in the range, if the second selected date is before the first date, the range will be auto-switched so that the second date becomes the first one.

Disabling this behavior, in a same scenario, will result in range being reset where the first date becomes the newly selected date and requires manually selecting the second date again. This can be useful if you want to do some custom validation logic

• Default: true

Code Example

<template>
  <VueDatePicker v-model="date" :range="{ autoSwitchStartEnd: false }"  />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref, onMounted } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref, onMounted } from 'vue';

  const date = ref();
</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);
  escClose?: boolean;
  maskFormat?: string;
  applyOnBlur?: boolean; // v12.1+
  separators?: string[]; // v12.1+
}

• Default: { enterSubmit: true, tabSubmit: true, openMenu: 'open', rangeSeparator: '-' }

INFO

• 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.input. 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
• escClose: Closes calendar on esc key press
• maskFormat: Check here
• applyOnBlur v12.1+: Tries to select a typed date when the input loses focus (has no effect if auto-apply is enabled)
• separators v12.1+: In case of a range picker, you can define custom separators to be used as check between the two dates

INFO

• When custom format is provided, focusing on the input will auto format the value to a given format if there is a selected date
• If custom format is of type string[] or a function, it defaults to the formats.input

WARNING

When using custom seprators, make sure to exclude the characters that are used in the format string. For example, if you use MM.dd.yyyy HH:mm as format, DO NOT USE '.' and ':' as separators

Code Example

<template>
  <VueDatePicker 
    v-model="date"
    placeholder="Start Typing ..."
    :text-input="{ format: 'MM.dd.yyyy HH:mm' }" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</script>

maskFormat Alpha

This property provides a way to mask the input value. When typing, it will automatically insert the mask characters

WARNING

• This is still an early stage of development and will be improved in the future. Currently, the only supported mode is a single date picker
• Tokens are used explicitly for masking the input, and hold no value, to set the parsing format, use format property
• Currently, can mask a default format only, using / and , as separators

INFO

Supported tokens:

• 'YYYY' - Years
• 'MM' - Months
• 'DD' - Days
• 'hh' - Hours
• 'mm' - Minutes
• 'ss' - Seconds

Code Example

<template>
  <VueDatePicker 
    v-model="date"
    placeholder="Start Typing ..."
    :text-input="{ maskFormat: 'MM.DD.YYYY, hh:mm' }" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  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 { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';

  const date = ref();
</script>