Vue Datepicker Documentation

Vue Datepicker is a lightweight and powerful datepicker solution designed specifically for Vue 3. It is highly customizable via props, slots, and custom components, allowing it to fit into almost any project requirement.

Key features include:

• Multiple Modes: Supports timepicker, range picker, month-year picker, week numbers, and more.
• Modular Design: Provides a wide range of features while allowing deep customization for specific needs.
• Customization: Fully accessible, mobile-friendly, supports built-in dark and light modes, and uses customizable CSS variables.
• Input Options: Supports various input types including text input.

The @vuepic/vue-datepicker is a highly configurable datepicker solution for Vue 3. Key features include:

• Picker Types: Single date, range, time, month, year, quarter, and week pickers.
• Selection Modes: Multiple dates select and multiple calendars.
• Advanced Support: UTC support, timezones, locale support, and SSR support.
• UI/UX: Text input, dark and light themes, week numbers, and accessibility.
• Developer Experience: Custom v-model support and included TypeScript definitions.

The partial property within the flow prop has been removed in v14 because it no longer affects behavior. Previously, it was used in specific scenarios with auto-apply, but this is now handled automatically. While the flow prop remains an object to allow for future updates, you should remove the partial key from your configuration.

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

In v14, the exposed method for controlling the datepicker flow has been renamed and its parameter type has changed:

1. Rename: handleFlow is now executeFlow.
2. Parameter Change: Instead of passing a numeric step index, you must now pass the step value (of type PickerSection).

Example of the updated usage:

// v13 (Deprecated/Removed)
dpRef.value?.handleFlow(1);

// v14
dpRef.value?.executeFlow('month');

The @flow-step emitted event has changed its payload. In v13, it provided the step index (a number). In v14, it provides the step value (the PickerSection type).

Update your event handler signatures accordingly:

// v13
function onFlowStep(stepIndex: number) {}

// v14
function onFlowStep(step: PickerSection) {}

To call methods on the VueDatePicker component from your script, you must add a ref to the component in your template and access it using Vue's ref or useTemplateRef API. This allows you to trigger internal component logic like opening/closing menus or clearing values from external buttons or functions.

<template>
  <VueDatePicker v-model="date" ref="datepicker" />
</template>

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

  const date = ref();
  const dpRef = useTemplateRef<InstanceType<typeof VueDatePicker>>('datepicker');

  const yourCustomMethod = () => {
    dpRef.value?.closeMenu()
  }
</script>

When using Nuxt, you must add @vuepic/vue-datepicker to the build.transpile array in your nuxt.config.ts to ensure the ESM bundle is processed correctly.

export default defineNuxtConfig({
  build: {
    transpile: ['@vuepic/vue-datepicker']
  }
})

When migrating from v11, the component import method has changed from a default import to a named import.

import { VueDatePicker } from '@vuepic/vue-datepicker';

To use the VueDatePicker component anywhere in your application without local imports, register it in your main entry file (e.g., main.js or app.js). You must also import the component's CSS file.

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

You can install the datepicker package using any of the following package managers:

# npm
npm install @vuepic/vue-datepicker

# yarn
yarn add @vuepic/vue-datepicker

# pnpm
pnpm add @vuepic/vue-datepicker

# bun
bun add @vuepic/vue-datepicker