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>

partial-range

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

<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

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

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>

min-range

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

<template>
    <VueDatePicker v-model="date" range min-range="3" />
</template>

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

const date = ref();
</script>

max-range

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

<template>
    <VueDatePicker v-model="date" range max-range="7" />
</template>

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

const date = ref();
</script>

fixed-start

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

<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

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

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

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

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

Limit the number of dates to select when multi-dates is enabled

• Type: number | string
• Default: null

Code Example

<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

<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

Deprecation warning

This prop is deprecated, please refer to range configuration section

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

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