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>

<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

range prop must be enabled to use range values
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

Type: PresetDate[]
Default: []

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

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

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>

<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

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>

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

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

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

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

interface MultiCalendarsOptions {
    solo?: boolean;
    static?: boolean;
    count?: string | number;
}

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>

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

<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?: boolean;
    rangeSeparator?: string;
    selectOnFocus?: boolean;
    format?: string | string[] | ((value: string) => Date | null);
}

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>

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

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>

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

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

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

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

Modes configuration ​

partial-range ​

preset-dates ​

min-range ​

max-range ​

fixed-start ​

fixed-end ​

multi-calendars-configuration ​

solo ​

static ​

text-input-configuration ​

inline-configuration ​

multi-dates-limit ​

partial-flow ​

show-last-in-range ​

Modes configuration

partial-range

preset-dates

min-range

max-range

fixed-start

fixed-end

multi-calendars-configuration

`solo`

`static`

text-input-configuration

inline-configuration

multi-dates-limit

partial-flow

show-last-in-range