Modes

Set the default mode for the datepicker

TIP

Depending on the mode, v-model might be different, so make sure to use the proper configuration

range

Enable selecting a range of two dates

• Type: boolean | RangeConfig
• Default: false

INFO

If the RangeConfig object is provided, range is auto enabled.

For more info about range configuration properties, please refer to range configuration section

Code Example

<template>
  <VueDatePicker v-model="dates" range />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const dates = ref();
</script>

multi-calendars

Enabling this prop will show multiple calendars side by side

INFO

If the MultiCalendarsOptions object is provided, multi-calendars are auto enabled. For more info take a look at multi-calendars configuration section.

This mode is not supported with year-picker and time-picker

On mobile devices, they will be shown in a column layout.

• Passing true, auto-enables 2 calendars
• string prop value must be a numeric string, e.g. '3'

• Type: boolean | number | string | MultiCalendarsOptions
• Default: false

Code Example

<template>
  <VueDatePicker v-model="date" range multi-calendars />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref, onMounted } from 'vue';

  const dates = ref();
</script>

month-picker

Change datepicker mode to select only month and year

• Type: boolean
• Default: false

Code Example

<template>
  <VueDatePicker v-model="month" month-picker />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const month = ref({
    month: new Date().getMonth(),
    year: new Date().getFullYear()
  });
</script>

time-picker

Change datepicker mode to select only time

• Type: boolean
• Default: false

Code Example

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

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

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

year-picker

Change datepicker mode to select only year

• Type: boolean
• Default: false

Code Example

<template>
  <VueDatePicker v-model="year" year-picker />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const year = ref(new Date().getFullYear());
</script>

week-picker

Enables selecting of a specific week range

• Type: boolean
• Default: false

Code Example

<template>
  <VueDatePicker v-model="date" week-picker />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref();
</script>

quarter-picker

Change datepicker mode to select a quarter

WARNING

When working with the quarter-picker, you will receive date(s) in the v-model. Each date will be the first date of the quarter. When using validation for min or max dates, disabled dates and so on, use the first date of the targeted quarter

• Type: boolean
• Default: false

Code Example

<template>
  <VueDatePicker v-model="quarter" quarter-picker />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';
  import { startOfQuarter } from "date-fns";

  const quarter = ref(startOfQuarter(new Date()));
</script>

text-input

When enabled, the datepicker will try to parse the date from user input.

INFO

Text input works with all picker modes.

If the TextInputOptions object is provided, text-input is auto enabled. For more info take a look at text-input configuration section.

• Type: boolean | TextInputOptions
• Default: false

Code Example

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

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref();
</script>

inline

Removes the input field and places the calendar in your parent component

INFO

If the InlineOptions object is provided, inline is auto enabled. For more info take a look at inline configuration section.

• Type: boolean | InlineOptions
• Default: false

Code Example

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

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref(new Date());
</script>

multi-dates

Allow selecting multiple dates. When changing time, the latest selected date is affected. To deselect the date, click on the selected value

• Type: boolean | MultiDatesConfig
• Default: false

INFO

• When the MultiDatesConfig object is provided, prop is auto enabled
• For additional multi-dates configuration properties, please refer to multi-dates configuration section

Code Example

<template>
  <VueDatePicker v-model="date" multiDates />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref();
</script>

flow

Define the selection order. The position in the array specifies the execution step.

TIP

In case you use flow for quarter-picker or month-picker, refer to root section as 'calendar'

INFO

If the flow order is interrupted, it will auto-resume from the next executed step in the array

WARNING

• flow is not supported with multi-calendars mode
• steps have no effect in year-picker mode

• Type:

interface FlowConfig { 
  steps: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
  partial?: boolean;
}

• Default: undefined

Code Example

<template>
  <VueDatePicker v-model="date" :flow="{ steps: flow }"  />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref();
  const flow = ['month', 'year', 'calendar'];
</script>

vertical

Sets the datepicker orientation to vertical mode. This changes the arrow actions from left/right to top/bottom, and the transitions will also be vertical

• Type: boolean
• Default: false

Code Example

<template>
  <VueDatePicker v-model="date" vertical />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref(new Date());
</script>

model-auto

Automatically switch between range and single picker modes

• Type: Boolean
• Default: false

WARNING

Since this prop uses range.partialRange in the background, make sure the range prop is provided and keep range.partialRange set to true

This is only compatible with date pickers; specific modes are not supported

Code Example

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

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { ref } from 'vue';

  const date = ref();
</script>