Vue Datepicker

https://vue3datepicker.com/
Admin
Vue Datepicker is a powerful, lightweight, and fully customizable datepicker component for Vue 3...
Tokens:39,643
Snippets:447
Trust Score:7.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Register Component Locally

Source: https://vue3datepicker.com/installation

Examples of local component registration using Script Setup, Composition API, and Options API.

```vue
<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script setup>
  import { ref } from 'vue';
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css'

  const date = ref();
</script>
```

```vue
<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script>
  import { ref } from 'vue';
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css'

  export default {
    components: { VueDatePicker },
    setup() {
      const date = ref();

      return {
        date
      }
    }
  };
</script>
```

```vue
<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css'

  export default {
    components: { VueDatePicker },
    data() {
      return {
        date: null,
      };
    }
  }
</script>
```

--------------------------------

### Install Vue Datepicker via Package Manager

Source: https://vue3datepicker.com/installation

Commands to install the library using common JavaScript package managers.

```shell
npm install @vuepic/vue-datepicker
```

```shell
yarn add @vuepic/vue-datepicker
```

```shell
pnpm add @vuepic/vue-datepicker
```

```shell
bun add @vuepic/vue-datepicker
```

--------------------------------

### Configure startTime

Source: https://vue3datepicker.com/props/time-picker-configuration

Sets the default starting time for the picker.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ startTime: { hours: 0, minutes: 0 } }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement am-pm-button slot

Source: https://vue3datepicker.com/slots/content

Example of replacing the default AM/PM button with a custom implementation.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ is24: false }">
    <template #am-pm-button="{ toggle, value }">
      <button @click="toggle">{{ value }}</button>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure Week Start

Source: https://vue3datepicker.com/props/general-configuration

Sets the starting day of the week using the WeekStart enum.

```vue
<template>
  <VueDatePicker v-model="date" :week-start="WeekStart.Monday" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Customize Minutes Overlay Header

Source: https://vue3datepicker.com/slots/overlay

Example implementation of the minutes-overlay-header slot to add a custom title.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #minutes-overlay-header="{ toggle }">
      <div>
        <span>Minutes</span>
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement right-sidebar slot

Source: https://vue3datepicker.com/slots/content

Basic setup for the right-sidebar slot using a ref for the date value.

```vue
  const date = ref();
</script>
```

--------------------------------

### Implement Custom Month Overlay Header

Source: https://vue3datepicker.com/slots/overlay

Example of adding custom content to the overlay header with a toggle action.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #month-overlay-header="{ toggle }">
      <div>
        <span @click="toggle">
           '< Go back' 
        </span>
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Customize Hours Overlay Header

Source: https://vue3datepicker.com/slots/overlay

Example implementation of the hours-overlay-header slot to add a custom title.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #hours-overlay-header="{ toggle }">
      <div class="overlay-header">
        <span>Hours</span>
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement custom time-picker-overlay

Source: https://vue3datepicker.com/slots/overlay

Example showing how to replace the default time picker overlay with custom select inputs. Ensure number arrays are passed to setter functions when using range mode.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #time-picker-overlay="{ hours, minutes, setHours, setMinutes }">
      <div class="overlay">
        <select class="select-input" :value="hours" @change="setHours(+$event.target.value)">
          <option v-for="h in hoursArray" :key="h.value" :value="h.value">{{ h.text }}</option>
        </select>
        <select class="select-input" :value="minutes" @change="setMinutes(+$event.target.value)">
          <option v-for="m in minutesArray" :key="m.value" :value="m.value">{{ m.text }}</option>
        </select>
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();

  const hoursArray = computed(() => {
    const arr = [];
    for (let i = 0; i < 24; i++) {
      arr.push({ text: i < 10 ? `0${i}` : i, value: i });
    }
    return arr;
  });

  const minutesArray = computed(() => {
    const arr = [];
    for (let i = 0; i < 60; i++) {
      arr.push({ text: i < 10 ? `0${i}` : i, value: i });
    }
    return arr;
  });
</script>

<style>
  .select-input {
    width: 100%;
  }

  .overlay {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    gap: 10px;
  }
</style>
```

--------------------------------

### Apply Custom UI Classes

Source: https://vue3datepicker.com/props/look-and-feel

Example of applying a custom class to the input element using the ui prop.

```vue
<template>
  <VueDatePicker v-model="date" :ui="{ input: 'my-input-class' }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Allowed Dates Implementation

Source: https://vue3datepicker.com/props/validation

Example of using the allowed-dates prop to restrict selection to a specific set of dates.

```vue
<template>
  <VueDatePicker v-model="date" :allowed-dates="allowedDates" />
</template>

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

  const date = ref();

  const allowedDates = [
    new Date(),
    addDays(new Date(), 1),
    addDays(new Date(), 2),
  ];
</script>
```

--------------------------------

### Enable Dark Mode

Source: https://vue3datepicker.com/props/look-and-feel

Example of enabling the dark theme for the datepicker component.

```vue
<template>
  <VueDatePicker v-model="date" dark />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement Custom Year Overlay

Source: https://vue3datepicker.com/slots/overlay

Example of replacing the year picker overlay with a custom select input.

```vue
<template>
  <VueDatePicker v-model="date">
    <template 
      #year-overlay="{
        month,
        year,
        items,
        updateMonthYear,
        toggle
      }">
        <div>
          <select
            class="select-input"
            :value="year"
            @change="(ev) => {
              updateMonthYear(month, +ev.target.value),
              toggle()
            }">
              <option v-for="y in items" :key="y.value" :value="y.value">{{ y.text }}</option>
          </select>
        </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure minRange

Source: https://vue3datepicker.com/props/modes-configuration

Set the minimum number of days allowed between the start and end date.

```vue
<template>
  <VueDatePicker v-model="date" :range="{ minRange: 3 }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure Input Attributes

Source: https://vue3datepicker.com/props/general-configuration

Example of passing custom input attributes to the datepicker component.

```vue
<template>
  <VueDatePicker v-model="date" :input-attrs="{ hideInputIcon: true }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Customize Year Overlay Header

Source: https://vue3datepicker.com/slots/overlay

Example implementation of the year-overlay-header slot to add a custom back navigation button.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #year-overlay-header="{ toggle }">
      <div>
        <span @click="toggle" >
            < Go back
        </span>
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### left-sidebar Slot Usage

Source: https://vue3datepicker.com/slots/content

Example of how to implement the left-sidebar slot within the VueDatePicker component.

```APIDOC
## Slot: left-sidebar

### Description
This slot allows adding custom content on the left side of the menu. If the `preset-dates` prop is used, the sidebar will be added before the list placement.

### Usage Example
```vue
<template>
  <VueDatePicker v-model="date">
    <template #left-sidebar="props">
      <div>Custom content</div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```
```

--------------------------------

### Implement left-sidebar slot

Source: https://vue3datepicker.com/slots/content

Basic usage example of the left-sidebar slot within the VueDatePicker component.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #left-sidebar="props">
      <div>Custom content</div>
      </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Retrieve Date in Timezone

Source: https://vue3datepicker.com/props/timezone

Example showing how to retrieve the selected date value in the configured timezone using the toString() method.

```vue
<template>
  <div>
    <VueDatePicker v-model="modelBind" placeholder="Select Date" timezone="utc" />
    <div>
      <button class="theme-btn" type="button" @click="getDate">Get date</button>
      <button class="theme-btn" type="button" @click="getDateInTimeZone">Get date in the timezone</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref, useSlots } from 'vue';
  
  const modelBind = ref();

  const getDate = () => {
    console.log(modelBind.value ? modelBind.value : 'No date selected');
  };

  const getDateInTimeZone = () => {
    console.log(modelBind.value ? modelBind.value.toString() : 'No date selected');
  };
</script>
```

--------------------------------

### Customize month-overlay-value slot

Source: https://vue3datepicker.com/slots/overlay

Example usage of the month-overlay-value slot to display custom month labels.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #month-overlay-value="{ text, value }">
      M: {{ value }}
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement custom month-year slot

Source: https://vue3datepicker.com/slots/sections

Example of overriding the month-year header with custom select elements.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #month-year="data">
      <template v-if="data.mode === 'date'">
        <!-- `data` is of DatePickerMonthYearSlotProps type -->
          <div style="display: flex; width: 100%; gap: 5px;">
            <select 
              style="display: flex;"
              :value="data.month" 
              @change="(ev) => data.updateMonthYear(+ev.target.value, data.year)">
                <option v-for="m in data.months" :key="m.value" :value="m.value">{{ m.text }}</option>
            </select>
            <select 
              style="display: flex;"
              :value="data.year"
              @change="(ev) => data.updateMonthYear(data.month, +ev.target.value)">
                <option v-for="y in data.years" :key="y.value" :value="y.value">{{ y.text }}</option>
            </select>
          </div>
      </template>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Customize calendar day content

Source: https://vue3datepicker.com/slots/content

Example of using the day slot to conditionally render custom content based on the day value.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #day="{ day, date }">
      <template v-if="day === tomorrow">
        <img src="/logo.png"/>
      </template>
      <template v-else>
        {{ day }}
      </template>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Disabled Times Implementation

Source: https://vue3datepicker.com/props/validation

Example of using the disabled-times prop to restrict specific hours and minutes in the time picker.

```vue
<template>
  <VueDatePicker 
    v-model="date"
    :max-time="{ hours: 11, minutes: 30 }"
    :disabled-times="disabledTimes"
  />
</template>

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

  const date = ref();

  const disabledTimes = [
    { hours: 15, minutes: '*' }, // disable full hour
    { hours: 16, minutes: 15 },
    { hours: 16, minutes: 20 },
    { hours: 17, minutes: 30 },
  ];
</script>
```

--------------------------------

### Customize month-overlay slot

Source: https://vue3datepicker.com/slots/overlay

Example usage of the month-overlay slot to replace the default month selection UI with a custom select element.

```vue
<template>
    <VueDatePicker v-model="date">
      <template 
          #month-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select 
                  class="select-input"
                  :value="month" 
                  @change="(ev) => {
                      updateMonthYear(+ev.target.value, year),
                      toggle()
                  }">
                <option v-for="m in items" :key="m.value" :value="m.value">{{ m.text }}</option>
              </select>
            </div>
      </template>
    </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Migrating flow configuration and methods

Source: https://vue3datepicker.com/migration/from-v13

Demonstrates the updated flow prop structure and the transition from handleFlow to executeFlow.

```vue
<template>
  <VueDatePicker
    ref="dpRef"
    :flow="{
      steps: ['year', 'month', 'calendar'],
      partial: true, 
    }"
    @flow-step="onFlowStep"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { VueDatePicker, type PickerSection } from '@vuepic/vue-datepicker';

  const dpRef = ref();

  dpRef.value?.handleFlow(1); 
  dpRef.value?.executeFlow('month'); 

  function onFlowStep(stepIndex: number) {} 
  function onFlowStep(step: PickerSection) {} 
</script>
```

--------------------------------

### Configure Preset Dates with Slots

Source: https://vue3datepicker.com/props/general-configuration

Demonstrates how to implement preset dates with custom slot rendering for the selection buttons.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #preset-date-range-button="{ label, value, presetDate }">
      <span role="button" :tabindex="0" @click="presetDate(value)">
        {{ label }}
      </span>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
  const presetDates = ref([
    {
      label: 'Today (Slot)',
      value: [new Date(), new Date()],
      slot: 'preset-date-range-button',
    },
    { label: 'Today', value: [new Date(), new Date()] },
    { 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>
```

--------------------------------

### Configure disableTimeRangeValidation

Source: https://vue3datepicker.com/props/modes-configuration

Allow the end time in a range to be set before the start time.

```vue
<template>
  <VueDatePicker 
    v-model="time" 
    time-picker
    :range="{ disableTimeRangeValidation: true }"
    placeholder="Select Time"
  />
</template>

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

  const time = ref();
</script>
```

--------------------------------

### min-time

Source: https://vue3datepicker.com/props/validation

Sets the minimal available time to pick.

```APIDOC
## min-time

### Description
Sets the minimal available time to pick.

### Type
{ hours: number; minutes: number; seconds?: number }

### Default
undefined
```

--------------------------------

### Configure Year Range

Source: https://vue3datepicker.com/props/general-configuration

Defines the start and end years for the year selection overlay.

```vue
<template>
  <VueDatePicker v-model="date" :year-range="[2020, 2040]" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure maxRange

Source: https://vue3datepicker.com/props/modes-configuration

Set the maximum number of days allowed between the start and end date.

```vue
<template>
  <VueDatePicker v-model="date" :range="{ maxRange: 7 }" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker";
  import { ref } from 'vue';
  
  const date = ref();
</script>
```

--------------------------------

### Configure fixedStart

Source: https://vue3datepicker.com/props/modes-configuration

Allow only the second date to be adjusted in a range. Requires v-model to be provided with both dates.

```vue
<template>
  <VueDatePicker v-model="date" :range="{ fixedStart: true }" :clearable="false" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### switchView

Source: https://vue3datepicker.com/methods-and-events/methods

Manually shows an overlay view.

```APIDOC
## switchView(view, instance)

### Description
Manually show an overlay. To close the overlay, pass 'calendar' as the parameter.

### Parameters
- **view** ('month' | 'year' | 'calendar' | 'time') - Required
- **instance** (number) - Optional - Instance number in case of multiple calendars (first is 0).
```

--------------------------------

### Import Component and Styles

Source: https://vue3datepicker.com/installation

Basic import statement for the component and its required CSS file.

```js
import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
```

--------------------------------

### openMenu

Source: https://vue3datepicker.com/methods-and-events/methods

Opens the datepicker menu.

```APIDOC
## openMenu()

### Description
Opens the datepicker menu.

### Signature
`() => void`
```

--------------------------------

### Configure Light Mode Theme

Source: https://vue3datepicker.com/customization/theming

Override the .dp--theme-light class to customize colors for light mode.

```css
.dp--theme-light {
  --dp-background-color: #fff;
  --dp-text-color: #212121;
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: #1976d2;
  --dp-primary-disabled-color: #6bacea;
  --dp-primary-text-color: #f8f5f5;
  --dp-secondary-color: #c0c4cc;
  --dp-border-color: #ddd;
  --dp-menu-border-color: #ddd;
  --dp-border-color-hover: #aaaeb7;
  --dp-border-color-focus: #aaaeb7;
  --dp-disabled-color: #f6f6f6;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-success-color: #76d275;
  --dp-success-color-disabled: #a3d9b1;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-marker-color: #ff6f60;
  --dp-tooltip-color: #fafafa;
  --dp-disabled-color-text: #8e8e8e;
  --dp-highlight-color: rgb(25 118 210 / 10%);
  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
  --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
}
```

--------------------------------

### Disable Transitions

Source: https://vue3datepicker.com/props/look-and-feel

Example of disabling built-in transitions by setting the transitions prop to false.

```vue
<template>
  <VueDatePicker v-model="date" :transitions="false" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Disable static mode for multi-calendars

Source: https://vue3datepicker.com/props/modes-configuration

Configures the calendar to auto-update the first calendar when the range starts.

```vue
<template>
    <VueDatePicker v-model="date" range :multi-calendars="{ static: false }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Set start-date for VueDatePicker

Source: https://vue3datepicker.com/props/general-configuration

Configures the initial month and year displayed when the datepicker opens.

```vue
<template>
  <VueDatePicker v-model="date" :start-date="new Date(2020, 1)" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement Selection Flow

Source: https://vue3datepicker.com/props/modes

Configure the selection order by passing an array of steps to the flow prop.

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

--------------------------------

### Customize year-overlay-value slot

Source: https://vue3datepicker.com/slots/overlay

Example usage of the year-overlay-value slot to display custom year labels.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #year-overlay-value="{ text, value }">
      Y: {{ value }}
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Disabled Dates Implementation

Source: https://vue3datepicker.com/props/validation

Example of using the disabled-dates prop to prevent selection of specific dates.

```vue
<template>
  <VueDatePicker v-model="date" :disabled-dates="disabledDates" />
</template>

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

  const date = ref();

  const disabledDates = [
    new Date(),
    addDays(new Date(), 1),
    addDays(new Date(), 2),
  ];
</script>
```

--------------------------------

### #minutes-overlay-value

Source: https://vue3datepicker.com/slots/overlay

Replaces the content in the single button in the minutes overlay.

```APIDOC
## #minutes-overlay-value

### Description
This slot replaces the content in the single button in the minutes overlay.

### Exposed Props
- **text** (string) - Text displayed in the element
- **value** (number) - Minutes value

### Example
```vue
<template>
  <VueDatePicker v-model="date">
    <template #minutes-overlay-value="{ text, value }">
     m:  {{ value }}
    </template>
  </VueDatePicker>
</template>
```
```

--------------------------------

### Register Component Globally

Source: https://vue3datepicker.com/installation

Register the component globally in the main application file.

```js
import { createApp } from "vue";
import App from './App.vue';

import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const app = createApp(App);

app.component('VueDatePicker', VueDatePicker);

app.mount('#app');
```

--------------------------------

### max-time

Source: https://vue3datepicker.com/props/validation

Sets the maximal available time to pick.

```APIDOC
## max-time

### Description
Sets the maximal available time to pick.

### Type
{ hours: number; minutes: number; seconds?: number }

### Default
undefined
```

--------------------------------

### Implement action-extra slot

Source: https://vue3datepicker.com/slots/content

Example of adding a custom element to the action row using the selectCurrentDate function.

```vue
<template>
  <VueDatePicker v-model="date">
   <template #action-extra="{ selectCurrentDate }">
     <span @click="selectCurrentDate()" title="Select current date">
       <img src="/logo.png" />
     </span>
   </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure minutesGridIncrement

Source: https://vue3datepicker.com/props/time-picker-configuration

Sets the increment step for the minutes overlay selection.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ minutesGridIncrement: 2 }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### action-preview

Source: https://vue3datepicker.com/slots/content

This slot replaces the date preview section in the action row.

```APIDOC
## action-preview

### Description
This slot replaces the date preview section in the action row.

### Exposed Props
- **value** (Date | Date[] | null) - Current selection in the picker
- **formatValue** (string) - Formatted value of the selected date(s)
```

--------------------------------

### Configure Inline Mode with Input

Source: https://vue3datepicker.com/props/modes-configuration

Enables inline mode with text input support using the inline configuration object.

```vue
<template>
  <VueDatePicker v-model="date" :inline="{ input: true }" text-input auto-apply />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Customize calendar header content

Source: https://vue3datepicker.com/slots/content

Example of using the calendar-header slot to apply conditional styling to specific columns.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #calendar-header="{ index, day }">
      <div :style="index === 5 || index === 6 ? 'color: red' : ''">
        {{ day }}
      </div>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement Week Picker Mode

Source: https://vue3datepicker.com/props/modes

Enables week range selection by setting the week-picker prop.

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

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

  const date = ref();
</script>
```

--------------------------------

### inline configuration

Source: https://vue3datepicker.com/props/modes-configuration

Configures the inline mode for the date picker. When provided, the inline prop is automatically enabled.

```APIDOC
## inline configuration

### Description
Configures the inline mode for the date picker. When the configuration object is provided, the inline prop is automatically enabled.

### Interface
interface InlineOptions {
  input?: boolean;
}

### Default
{ input: false }
```

--------------------------------

### Enable range selection in Vue Datepicker

Source: https://vue3datepicker.com/props/modes

Use the range prop to allow users to select a start and end date.

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

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

  const dates = ref();
</script>
```

--------------------------------

### Text-input configuration interface

Source: https://vue3datepicker.com/props/modes-configuration

Defines the structure for the text-input configuration object.

```typescript
interface TextInputOptions {
  enterSubmit?: boolean;
  tabSubmit?: boolean;
  openMenu?: 'open' | 'toggle' | boolean;
  rangeSeparator?: string;
  selectOnFocus?: boolean;
  format?: string | string[] | ((value: string) => Date | null);
  escClose?: boolean;
  maskFormat?: string;
  applyOnBlur?: boolean;
  separators?: string[];
}
```

--------------------------------

### highlight

Source: https://vue3datepicker.com/props/general-configuration

Allows specifying dates, years, months, quarters, or weekdays to be highlighted in the date picker.

```APIDOC
## highlight

### Description
Specify dates or time ranges to be highlighted in the calendar.

### Type
`HighlightFn | Partial<Highlight>`

### Default
`undefined`

### Example
```vue
<template>
  <VueDatePicker v-model="date" :highlight="{ dates: highlighted }" />
</template>
```
```

--------------------------------

### Enable Loading Overlay

Source: https://vue3datepicker.com/props/general-configuration

Adds a loading overlay to the datepicker menu.

```vue
<template>
  <VueDatePicker v-model="date" loading />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement quarter slot

Source: https://vue3datepicker.com/slots/content

Replaces the default quarter item display.

```vue
<template>
  <VueDatePicker v-model="quarter">
    <template #quarter="{ value }">
      <span>{{ formatQuarter(value) }}</span>
    </template>
  </VueDatePicker>
</template>

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

  const date = ref();
  
  const formatQuarter = (quarter) => {
    return format(quarter, 'QQQ')
  }
</script>
```

--------------------------------

### Disable autoSwitchStartEnd for range selection

Source: https://vue3datepicker.com/props/modes-configuration

Prevents the datepicker from automatically swapping start and end dates when the second selected date precedes the first, forcing a reset instead.

```vue
<template>
  <VueDatePicker v-model="date" :range="{ autoSwitchStartEnd: false }"  />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### #month-overlay-header

Source: https://vue3datepicker.com/slots/overlay

Slot to add custom content in the overlay header.

```APIDOC
## Slot: #month-overlay-header

### Description
Add custom content in the overlay header.

### Exposed Props
- **toggle** (function) - Function to toggle the overlay
```

--------------------------------

### Configure Preview Format

Source: https://vue3datepicker.com/props/formatting

Customizes the format of the selected value in the preview date section.

```vue
<template>
  <VueDatePicker v-model="date" :formats="{ preview: 'dd.MM.yyyy - HH:mm' }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure is24

Source: https://vue3datepicker.com/props/time-picker-configuration

Switch between 24H and 12H time format.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ is24: false }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Define Highlight Interface and Types

Source: https://vue3datepicker.com/props/general-configuration

Defines the structure for date highlighting and the function signatures for custom highlight logic.

```typescript
interface Highlight {
  dates: Date[];
  years: number[];
  months: { month: number; year: number }[];
  quarters: { quarter: number; year: number }[];
  weekdays: number[];
  options: { highlightDisabled: boolean };
}

type HighlightFn =
  | ((date: Date) => boolean)
  | ((month: { month: number; year: number }) => boolean)
  | ((yearOrWeekDay: number) => boolean)
  | ((quarter: { quarter: number; year: number }) => boolean);
```

--------------------------------

### Configure autoRange

Source: https://vue3datepicker.com/props/modes-configuration

Predefine a range to select automatically.

```vue
<template>
  <VueDatePicker v-model="date" :range="{ autoRange: 5 }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### #year-overlay

Source: https://vue3datepicker.com/slots/overlay

Slot to replace the content in the year picker overlay.

```APIDOC
## Slot: #year-overlay

### Description
Replace the content in the year picker overlay.

### Exposed Props
- **month** (number) - Selected month value
- **year** (number) - Selected year value
- **items** (Array<{ text: string; value: number }>) - Generated array of months
- **updateMonthYear** (function) - Function to update month and year: `(month: number, year: number) => void`
- **instance** (number) - Order of the calendar in multi-calendar setups
- **toggle** (function) - Function to toggle the overlay
```

--------------------------------

### text-input configuration

Source: https://vue3datepicker.com/props/modes-configuration

Configures the text input field behavior, including submission triggers, menu toggling, date formatting, and input masking.

```APIDOC
## text-input

### Description
Configuration for the text-input prop. Providing this object enables text input mode.

### Interface
interface TextInputOptions {
  enterSubmit?: boolean;
  tabSubmit?: boolean;
  openMenu?: 'open' | 'toggle' | boolean;
  rangeSeparator?: string;
  selectOnFocus?: boolean;
  format?: string | string[] | ((value: string) => Date | null);
  escClose?: boolean;
  maskFormat?: string;
  applyOnBlur?: boolean;
  separators?: string[];
}

### Default
{ enterSubmit: true, tabSubmit: true, openMenu: 'open', rangeSeparator: '-' }
```

--------------------------------

### Implement Month Picker Mode

Source: https://vue3datepicker.com/props/modes

Enables month and year selection by setting the month-picker prop and providing an object with month and year properties.

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

--------------------------------

### multi-dates configuration

Source: https://vue3datepicker.com/props/modes-configuration

Configures additional behavior for the multi-dates selection mode.

```APIDOC
## multi-dates configuration

### Description
Configure additional behavior for multi-dates mode.

### Interface
interface MultiDatesConfig {
  limit?: number | string;
  dragSelect?: boolean;
}

### Properties
- **limit** (number | string) - Optional - Limit the number of dates to select. Default: null.
- **dragSelect** (boolean) - Optional - Allows selecting multiple dates by dragging the mouse over the calendar cells. Default: true.
```

--------------------------------

### executeFlow

Source: https://vue3datepicker.com/methods-and-events/methods

Triggers the flow again.

```APIDOC
## executeFlow(flowStep)

### Description
Triggers the flow again, even if the picker is in the open state.

### Parameters
- **flowStep** ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds') - Optional - Trigger flow from a given step.
```

--------------------------------

### month-overlay

Source: https://vue3datepicker.com/slots/overlay

Slot to replace the content in the month picker overlay.

```APIDOC
## Slot: #month-overlay

### Description
Replaces the content in the month picker overlay.

### Exposed Props
- **month** (number) - Selected month value
- **year** (number) - Selected year value
- **items** (Array<{text: string, value: number}>) - Generated array of months
- **updateMonthYear** (function) - Function to update month and year: (month: number, year: number) => void
- **instance** (number) - Order of the calendar in multi-calendar setups
- **toggle** (function) - Function to toggle the overlay
```

--------------------------------

### Configure enableSeconds

Source: https://vue3datepicker.com/props/time-picker-configuration

Enable the seconds selection in the time picker.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ enableSeconds: true }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### #month

Source: https://vue3datepicker.com/slots/overlay

Replaces the content in the month picker button.

```APIDOC
## #month

### Description
This slot replaces the content in the month picker button.

### Exposed Props
- **text** (string) - Text displayed in the element
- **value** (number) - Month value

### Example
```vue
<template>
  <VueDatePicker v-model="date">
    <template #month="{ text, value }">
      M: {{ value }}
    </template>
  </VueDatePicker>
</template>
```
```

--------------------------------

### Configure text-input format

Source: https://vue3datepicker.com/props/modes-configuration

Sets a custom parsing format for the text input field.

```vue
<template>
  <VueDatePicker 
    v-model="date"
    placeholder="Start Typing ..."
    :text-input="{ format: 'MM.dd.yyyy HH:mm' }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### model-auto

Source: https://vue3datepicker.com/props/modes

Automatically switch between range and single picker modes.

```APIDOC
## model-auto

### Description
Automatically switch between range and single picker modes. Note that this requires the `range` prop to be provided and `range.partialRange` set to `true`.

### Type
`Boolean`

### Default
`false`
```

--------------------------------

### text-input

Source: https://vue3datepicker.com/props/modes

Enables manual date parsing from user text input.

```APIDOC
## Prop: text-input

### Description
When enabled, the datepicker will attempt to parse the date from user input. This works with all picker modes.

### Type
boolean | TextInputOptions

### Default
false

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

--------------------------------

### Configure secondsGridIncrement

Source: https://vue3datepicker.com/props/time-picker-configuration

Sets the increment step for the seconds overlay selection. Requires enableSeconds to be true.

```vue
<template>
  <VueDatePicker 
    v-model="date"
    :time-config="{ secondsGridIncrement: 2, enableSeconds: true }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement action-preview slot

Source: https://vue3datepicker.com/slots/content

Customizing the date preview section within the action row using the exposed value prop.

```vue
<template>
    <VueDatePicker v-model="date" ref="dp">
      <template #action-preview="{ value }">
        {{ getDate(value) }}
      </template>
    </VueDatePicker>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Floating Menu Configuration

Source: https://vue3datepicker.com/props/general-configuration

Defines the interface and usage for the floating menu settings.

```ts
import { type ShallowRef } from 'vue';
import type { Placement, Strategy } from '@floating-ui/vue';

interface FloatingConfig {
  offset?: number;
  arrow?: Readonly<ShallowRef<HTMLDivElement | null>> | boolean;
  strategy?: Strategy;
  placement?: Placement;
  flip?: boolean | FlipOptions;
  shift?: boolean | ShiftOptions;
}
```

```vue
<template>
  <VueDatePicker v-model="date" :floating="{ arrow: false, offset: 0 }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### dark

Source: https://vue3datepicker.com/props/look-and-feel

Toggles between light and dark theme modes.

```APIDOC
## dark

### Description
Theme switches between the dark and light mode.

### Type
`boolean`

### Default
`false`
```

--------------------------------

### Enable solo mode for multi-calendars

Source: https://vue3datepicker.com/props/modes-configuration

Configures calendars to operate independently of each other.

```vue
<template>
  <VueDatePicker v-model="date" range :multi-calendars="{ solo: true }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Implement calendar markers

Source: https://vue3datepicker.com/props/general-configuration

Adds visual markers to specific dates with optional tooltips using the markers prop.

```vue
<template>
  <VueDatePicker v-model="date" :markers="markers" />
</template>

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

  const date = ref();
  const markers = [
    {
      date: addDays(new Date(), 1),
      type: 'dot',
      tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
    },
    {
      date: addDays(new Date(), 2),
      type: 'line',
      tooltip: [
        { text: 'First tooltip', color: 'blue' },
        { text: 'Second tooltip', color: 'yellow' },
      ],
    },
    {
      date: addDays(new Date(), 3),
      type: 'dot',
      color: 'yellow',
    },
  ];
</script>
```

--------------------------------

### Default ActionRow configuration

Source: https://vue3datepicker.com/props/general-configuration

The default object used for the action row configuration.

```ts
{
  selectBtnLabel: 'Select',
  cancelBtnLabel: 'Cancel',
  nowBtnLabel: 'Now',
  showSelect: true,
  showCancel: true,
  showNow: false,
  showPreview: true,
  nowBtnRound: undefined,
}
```

--------------------------------

### Configure timePickerInline

Source: https://vue3datepicker.com/props/time-picker-configuration

Displays the time picker directly under the calendar instead of as an overlay.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ timePickerInline: true }"/>
</template>

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

  const date = ref();
</script>
```

--------------------------------

### Configure Day Format

Source: https://vue3datepicker.com/props/formatting

Customizes the day value display in the calendar.

```vue
<template>
  <VueDatePicker v-model="date" :formats="{ day: 'dd' }" />
</template>

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

  const date = ref();
</script>
```

--------------------------------

### transitions

Source: https://vue3datepicker.com/props/look-and-feel

Controls the transition effects for the menu and calendar navigation. Accepts a boolean or a Transitions object.

```APIDOC
## transitions

### Description
Control transitions inside the menu. You can define your own or disable them using a boolean.

### Type
`Transitions | boolean`

### Default
`true`

### Interface
```typescript
interface Transitions {
  open?: string; 
  close?: string; 
  next?: string; 
  previous?: string;
  menuAppearTop?: string; 
  menuAppearBottom?: string; 
  vNext?: string; 
  vPrevious?: string; 
}
```
```

--------------------------------

### Configure minutesIncrement

Source: https://vue3datepicker.com/props/time-picker-configuration

Sets the increment step for minutes when using the arrow controls.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ minutesIncrement: 5 }"/>
</template>

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

  const date = ref();
</script>
```
Tokens:
Raw