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, partialRange as partial-range and so on

partial-range

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

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

Info

range prop must be enabled

Type: PresetRange[]
Default: []

interface PresetRange {
  label: string;
  range: Date[] | string[];
  style?: Record<string, string>;
  slot?: string
}

Code Example

vue

<template>
    <VueDatePicker v-model="date" range :preset-ranges="presetRanges">
      <template #yearly="{ label, range, presetDateRange }">
        <span @click="presetDateRange(range)">{{ label }}</span>
      </template>
    </VueDatePicker>
</template>

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

const date = ref();

const presetRanges = ref([
  { label: 'Today', range: [new Date(), new Date()] },
  { label: 'This month', range: [startOfMonth(new Date()), endOfMonth(new Date())] },
  {
    label: 'Last month',
    range: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
  },
  { label: 'This year', range: [startOfYear(new Date()), endOfYear(new Date())] },
  {
    label: 'This year (slot)',
    range: [startOfYear(new Date()), endOfYear(new Date())],
    slot: 'yearly',
  },
]);
</script>

min-range

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

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

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

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

When enabled, both calendars will be independent of each other

Info

range and multi-calendars props must be enabled

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" range multi-calendars multi-calendars-solo />
</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>

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

Info

range and multi-calendars props must be enabled

Type: boolean
Default: true

Code Example

vue

<template>
    <VueDatePicker v-model="date" range multi-calendars :multi-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-options

Configuration for text-input prop

Type: TextInputOptions
Default: { enterSubmit: true, tabSubmit: true, openMenu: true, rangeSeparator: '-' }

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

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

Code Example

vue

<template>
    <VueDatePicker 
      v-model="date"
      placeholder="Start Typing ..."
      text-input
      :text-input-options="textInputOptions" />
</template>

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

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

mode-height

If you use month-picker, time-picker or year-picker, set custom height of the picker in px

Type: number | string
Default: 255

Code Example

vue

<template>
    <VueDatePicker v-model="time" time-picker mode-height="120" />
</template>

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

const time = ref({
  hours: new Date().getHours(),
  minutes: new Date().getMinutes()
});
</script>

inline-with-input

Use input with the inline mode, useful if you enable text-input

Type: boolean
Default: false

Code Example

vue

<template>
    <VueDatePicker v-model="date" inline text-input inline-with-input auto-apply />
</template>

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

const date = ref();
</script>

multi-dates-limit

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

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>

auto-apply-month

By default, switching years in the month-picker mode, the month value will auto switch to the selected year. To use manual selecting, you can disable this option

Type: boolean
Default: true

Code Example

vue

<template>
  <VueDatePicker v-model="date" month-picker :auto-apply-month="false" />
</template>

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

const date = ref({ month: new Date().getMonth(), year: new Date().getFullYear() });

</script>

Modes configuration ​

partial-range ​

preset-ranges ​

min-range ​

max-range ​

fixed-start ​

fixed-end ​

multi-calendars-solo ​

multi-static ​

text-input-options ​

mode-height ​

inline-with-input ​

multi-dates-limit ​

partial-flow ​

show-last-in-range ​

auto-apply-month ​

Modes configuration

partial-range

preset-ranges

min-range

max-range

fixed-start

fixed-end

multi-calendars-solo

multi-static

text-input-options

mode-height

inline-with-input

multi-dates-limit

partial-flow

show-last-in-range

auto-apply-month