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

<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

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

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

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

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

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>