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

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>

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

• 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

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

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>