### Install with Bun

Source: https://vue3datepicker.com/installation

Install the Vue Datepicker component using Bun. Bun is a fast, all-in-one JavaScript runtime.

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

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

### Install with pnpm

Source: https://vue3datepicker.com/installation

Install the Vue Datepicker component using pnpm. pnpm is known for its efficient disk space usage.

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

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

### Install with npm

Source: https://vue3datepicker.com/installation

Install the Vue Datepicker component using npm. This is the most common package manager for Node.js projects.

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

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

### Install with Yarn

Source: https://vue3datepicker.com/installation

Install the Vue Datepicker component using Yarn. Yarn is another popular package manager for JavaScript.

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

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

### Local Component Registration (Setup Script)

Source: https://vue3datepicker.com/installation

Register the Vue Datepicker component locally within a component using the `<script setup>` syntax. This is suitable for Composition 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>
```

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

### Set Week Start Day

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

Configure the starting day of the week using the `week-start` prop. Accepts a number (0-6, where 0 is Sunday) or a string. If not provided, the locale's default is used.

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

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

### Set Default Start Time

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

Define a specific starting time for the date picker. If not provided, the picker defaults to the current time.

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

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

### Custom Right Sidebar Content Example

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

Shows how to implement custom content within the `right-sidebar` slot of the Vue 3 Datepicker. The setup is similar to the left sidebar.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #right-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>
```

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

### Focus Start Date in Vue3 Datepicker

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

Shows how to use the `focus-start-date` prop in conjunction with `start-date` to ensure the datepicker opens to the specified start date, ignoring any existing `v-model` value. This forces the initial view to the `start-date`.

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

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

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

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

### Vue Datepicker v13 Migration Example

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

Demonstrates the usage of the `executeFlow` method and the updated `@flow-step` event after migrating from v13. The `partial` property in the `flow` prop is removed.

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

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

### Custom Left Sidebar Content Example

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

Demonstrates how to use the `left-sidebar` slot to inject custom HTML content into the date picker. Ensure the VueDatePicker component is imported.

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

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

### Set Start Date for Vue3 Datepicker

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

Demonstrates how to initialize the Vue3 Datepicker to a specific month and year using the `start-date` prop. This is useful for pre-selecting a view when the component first loads.

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

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

### Configure Quarter Display Format

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

Control the format of the quarter name in the quarter picker using the `formats` prop with the `quarter` key. This example uses 'qqqq' for the quarter format.

```vue
<template>
  <VueDatePicker v-model="quarter" quarter-picker :formats="{ quarter: 'qqqq' }" />
</template>

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

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

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

### Configure Flow Steps in Vue

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

Implement a custom selection flow by providing an array of steps to the `flow` prop. This example defines a flow for month, year, and calendar selection.

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

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

### Custom v-model Type with model-type

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

Shows how to specify a custom format for v-model binding using the `model-type` prop. This example uses 'dd.MM.yyyy' for date formatting.

```vue
<template>
  <VueDatePicker v-model="date" model-type="dd.MM.yyyy" />
</template>

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

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

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

### Configure Year Display Format

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

Customize the year text in the year picker overlay using the `formats` prop with the `year` key. This example formats the year as 'yo'.

```vue
<template>
  <VueDatePicker v-model="year" year-picker :formats="{ year: 'yo' }" />
</template>

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

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

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

### Configure Day Display Format

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

Modify the format of the day value shown in the calendar via the `formats` prop and the `day` key. This example sets the day format to 'dd'.

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

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

### Configure Preview Section Display Format

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

Change the format of the selected value shown in the preview date section using the `formats` prop and the `preview` key. This example applies a 'dd.MM.yyyy - HH:mm' format.

```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 Weekday Display Format

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

Adjust the format of the weekday name displayed in the calendar by using the `formats` prop with the `weekDay` key. This example sets the weekday format to 'EEEEE'.

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

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

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

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

### Configure Month Display Format

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

Use the `formats` prop with the `month` key to change how the month name appears in the month picker overlay. This example sets the month format to 'LLLL'.

```vue
<template>
  <VueDatePicker v-model="month" month-picker :formats="{ month: 'LLLL' }" />
</template>

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

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

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

### Vue Datepicker with Min/Max Date Navigation Prevention

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

This example shows how to prevent users from navigating past the `min-date` or `max-date` using the `prevent-min-max-navigation` prop. It requires importing date-fns for date manipulation.

```vue
<template>
  <VueDatePicker 
    v-model="date"
    prevent-min-max-navigation
    :min-date="minDate"
    :max-date="maxDate"
  />
</template>

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

  const minDate = subMonths(new Date(), 2);
  const maxDate = addMonths(new Date(), 2);

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

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

### Enable Fixed Start Date in Vue Datepicker Range

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

Allows only the adjustment of the second date in a range. Requires `v-model` to be pre-populated with both dates and should not be used with `fixedEnd`.

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

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

### Configure Input Field Display Format

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

Customize the format of the selected date/time displayed in the input field using the `formats` prop with the `input` key. This example sets a 'dd.MM.yyyy - HH:mm' format.

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

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

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

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

### Vue Datepicker with Weekday Filters

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

This example demonstrates how to disable specific weekdays (e.g., Monday and Tuesday) using the `filters` prop. Ensure the `VueDatePicker` component is imported.

```vue
<template>
  <VueDatePicker v-model="date" :filters="{ weekDays: [1, 2] }" />
</template>

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

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

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

### Configure Text Input Masking

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

Apply a mask format to the text input for guided user input. This helps in structuring the date entry, with specific tokens for year, month, day, hour, minute, and second.

```vue
<template>
  <VueDatePicker 
    v-model="date"
    placeholder="Start Typing ..."
    :text-input="{ maskFormat: 'MM.DD.YYYY, hh:mm' }" />
</template>

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

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

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

### open

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

Emitted when the datepicker menu is opened.

```APIDOC
## @open

### Description
Emitted when the datepicker menu is opened.

### Type
`() => void`
```

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

### range-start

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

Emitted when the first date is selected in the range selection mode.

```APIDOC
## @range-start

### Description
Emitted when the first date is selected in `range` mode.

### Type
`(date: Date) => void`
```

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

### Configure Year Range

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

Specify the start and end years for the year selection overlay. This limits the selectable years within the datepicker.

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

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

### openMenu

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

Opens the datepicker menu.

```APIDOC
## openMenu

### Description
Opens the datepicker menu.

### Method
`openMenu()`

### Parameters
None
```

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

### switchView

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

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

```APIDOC
## switchView

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

### Method
`switchView(view: 'month' | 'year' | 'calendar' | 'time', instance?: number)`

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

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

### Replace Right Arrow Icon

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

Customize the right arrow icon for month/year navigation using the `arrow-right` slot. This example also demonstrates the `vertical` mode.

```vue
<template>
  <VueDatePicker v-model="date" vertical>
    <template #arrow-right>
      <img src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

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

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

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

### tooltip-open

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

Emitted when a marker tooltip is opened, providing the marker data.

```APIDOC
## @tooltip-open

### Description
Emitted when marker tooltip is opened.

### Parameters
* `marker` (Marker) - The marker data associated with the tooltip.

### Type
`(marker: Marker) => void`
```

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

### Import Component and CSS

Source: https://vue3datepicker.com/installation

Import the VueDatePicker component and its associated CSS file. This is a necessary step before registering the component.

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

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

### Set Maximum Range in Vue Datepicker

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

Sets the maximum number of days allowed between the selected start and end dates. Use to enforce a maximum duration for the selected range.

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

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

### Set Minimum Range in Vue Datepicker

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

Sets the minimum number of days required between the selected start and end dates. Use to enforce a minimum duration for the selected range.

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

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

### Disable Partial Range Selection in Vue Datepicker

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

Disables the default behavior where only one date is required for range input. Use when a complete start and end date are mandatory.

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

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

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

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

### toggleMenu

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

Manually toggle the picker menu.

```APIDOC
## toggleMenu

### Description
Manually toggle the picker menu.

### Method
`toggleMenu()`

### Parameters
None
```

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

### menu-mounted

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

Emitted when the menu component of the datepicker is mounted, providing the menu's HTML element.

```APIDOC
## @menu-mounted

### Description
Emits when the menu component is mounted.

### Type
`(el: HTMLElement) => void`

### Parameters
* `el` (HTMLElement) - The menu HTML element.
```

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

### Basic v-model Binding

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

Demonstrates how to bind a date value using v-model. The `model-value` prop is used for the date and `@update:model-value` handles the update.

```vue
<template>
  <VueDatePicker :model-value="date" @update:model-value="(value) => (date = value)" />
</template>

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

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

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

### Configure Multi-Calendars with Solo Option

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

Enable independent calendar views by setting `solo: true` within the `multi-calendars` configuration object. This makes each calendar operate separately.

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

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

### Set Datepicker Language with Locale

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

Use the `locale` prop to set the datepicker's language. This example demonstrates setting the locale to Chinese (China) using `zhCn` from `date-fns/locale`.

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

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

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

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

### overlay-toggle

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

Emitted when an overlay (like month or year picker) is opened or closed.

```APIDOC
## @overlay-toggle

### Description
Emits an event whenever some overlay is opened.

### Type
`(value: { open: boolean, overlay: PickerSection }) => void`

### Type Definition
`PickerSection = 'month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds'`
```

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

### Disable Auto-Switching Range End

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

Set `autoSwitchStartEnd: false` to disable the default behavior of auto-switching the range end if it's before the start date. This allows for manual re-selection or custom validation.

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

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

### Provide Custom Day Names

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

Supply custom labels for the day names displayed in the calendar header. Ensure the array has a length of 7 and is ordered correctly with the `week-start` prop.

```vue
<template>
  <VueDatePicker v-model="date" :day-names="['1', '2', '3', '4', '5', '6', '7']" />
</template>

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

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

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

### Set Hours Grid Increment

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

Configure the increment value for hours when using the hours overlay selection. The value starts from 0 and increments up to 24 or 12 based on the `is24` prop.

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

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

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

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

### Disable Time Range Validation in Vue Datepicker

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

Explicitly allows the end time in range mode to be set before the start time. Use when time order within a range is not strictly enforced.

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

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

### Enabling Loading Overlay

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

Add a loading overlay to the datepicker menu by setting the `loading` prop to `true`. This indicates that data is being fetched or processed.

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

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

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

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

### TypeScript Interface for UI Configuration

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

Defines the structure for custom UI class configurations. Allows specifying CSS classes for various datepicker elements.

```typescript
interface UIConfig {
  navBtnNext?: string | string[];
  navBtnPrev?: string | string[];
  calendar?: string | string[];
  calendarCell?: string | string[];
  menu?: string | string[];
  input?: string | string[];
  dayClass?: (date: Date, internalModelValue: Date | Date[] | null) => string;
}
```

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

### Configure Multi-Calendars with Static Option Disabled

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

Disable the default static calendar view by setting `static: false` in `multi-calendars`. This allows the first calendar to auto-update based on the range start and subsequent calendars to adjust accordingly.

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

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

### Adding Custom Markers to Dates

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

Illustrates how to add custom markers to specific dates using the `markers` prop. This includes options for marker type, tooltips, and colors.

```typescript
interface Marker {
  date: Date | string | number;
  type?: 'dot' | 'line';
  tooltip?: { text: string; color?: string; slot?: string }[];
  color?: string;
  // el is an HTML element of a calendar cell
  customPosition?: (el: HTMLElement) => Record<string, string | number>;
}
```

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

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

### text-submit

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

Emitted when the Enter key is pressed, provided that the `text-input` prop is true and `enterSubmit` is true in `text-input-options`.

```APIDOC
## @text-submit

### Description
When the `text-input` prop is set to `true` and `enterSubmit` is set to `true` in `text-input-options`, this event is emitted when the enter key is pressed.

### Type
`() => void`
```

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

### Configure Seconds Grid Increment and Enable Seconds

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

Set the increment value for the seconds grid and enable the seconds display in the time picker. This allows for finer control over time selection.

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

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

### Customize Minutes Overlay Header

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

Customize the minutes overlay header with custom content. The `toggle` function is provided for overlay management.

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

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

### Displaying Current Date and Time

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

Logs the current date and time to the console, showing the browser's local GMT offset and timezone.

```typescript
console.log(new Date());
// Sat Oct 25 2025 19:28:21 GMT+0200 (Central European Summer Time)
```

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

### Custom Minutes Display in Time Picker

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

Replaces the default display of minutes text between the arrows in the time picker. It provides the text and value of the minutes.

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

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

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

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

### Configure Floating Menu

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

Customize the behavior and appearance of the floating menu, including offset, arrow visibility, positioning strategy, and middleware configurations.

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

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

### Custom Minutes Value in Minutes Overlay

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

Replaces the content within the single button in the minutes overlay. It provides the text and value of the minutes.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #minutes-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>
```

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

### Define Selection Flow

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

Configure the selection order using the `flow` prop with a `FlowConfig` object. The `steps` array defines the sequence of selection stages. This prop is not supported with `multi-calendars` mode.

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

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

### range-end

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

Emitted when the second date is selected in the range selection mode.

```APIDOC
## @range-end

### Description
Emitted when the second date is selected in `range` mode.

### Type
`(date: Date) => void`
```

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

### Enable Week Picker Mode

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

Use the `week-picker` prop to allow users to select a specific week range. The `v-model` will store the selected week information.

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

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

### executeFlow

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

Triggers the flow again, even if the picker is in the open state. Function supports `flowStep` parameter to trigger flow from a given step again.

```APIDOC
## executeFlow

### Description
Triggers the flow again, even if the picker is in the open state. Function supports `flowStep` parameter to trigger flow from a given step again.

### Method
`executeFlow(flowStep?: 'month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')`

### Parameters
#### Path Parameters
- **flowStep** ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds') - Optional - The flow step to trigger from.
```

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

### Highlighting Specific Dates

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

Use the `highlight` prop to specify dates, years, months, quarters, or weekdays to be highlighted. This can be a static object or a function.

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

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

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

  const date = ref();
  const highlighted = [addDays(new Date(), 1), addDays(new Date(), 2), addDays(new Date(), 3)];
</script>
```

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

### flow-step

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

Emitted when a flow step is triggered in the datepicker's navigation. Note: The first step does not emit this event.

```APIDOC
## @flow-step

### Description
Emitted when the flow step is triggered.

### Type
`(step: 'month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds') => void`

### WARNING
* The current logic will not emit an event on the first flow step
```

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

### Watching TZDate Changes and Logging Output

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

Watches for changes in a `TZDate` model and logs both the local Date object representation and its `toString()` representation in the specified timezone.

```typescript
  import { ref, watch } from "vue";

  const date = ref(new TZDate('Sat Oct 25 2025 19:28:21 GMT+0200 (Central European Summer Time)', 'utc'));

  watch(date, (value) => {
      console.log(value); // Mon Oct 27 2025 19:00:00 GMT+0200 (Central European Summer Time)
      console.log(value.toString()); // Mon Oct 27 2025 17:00:00 GMT+0000 (Coordinated Universal Time)
  })
```

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

### Replace Action Preview

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

Customize the date preview section in the action row. The `value` prop is the current selection, and `formatValue` is the formatted string of the selected date(s).

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

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

### Preset Dates Configuration

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

Configure preset date ranges or specific dates that appear in a sidebar for quick selection. Custom slots can be used for preset date buttons.

```typescript
import type { MaybeRefOrGetter } from 'vue';

interface PresetDate {
  label: string;
  value: MaybeRefOrGetter<Date[] | string[] | Date | string>;
  style?: Record<string, string>;
  slot?: string;
  testId?: string;
}
```

```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 Text Input Formatting

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

Set a custom date format for the text input field. The date will be displayed in this format when the input is focused.

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

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

### dpMenuRef

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

Access internal `dpMenuRef`, which is the actual floating menu component.

```APIDOC
## dpMenuRef

### Description
Access internal `dpMenuRef`, which is the actual floating menu component.

### Method
`dpMenuRef()`

### Return Value
`Ref<ComponentPublicInstance | null>` - A ref to the floating menu component.
```

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

### Use 12-Hour Format

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

Configure the time picker to use a 12-hour format instead of the default 24-hour 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>
```

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

### Enable Seconds in Time Picker

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

Enable the display and selection of seconds within the time picker component.

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

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

### inputRef

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

Access internal `inputRef`, which is the input component (not the input field).

```APIDOC
## inputRef

### Description
Access internal `inputRef`, which is the input component (not the input field).

### Method
`inputRef()`

### Return Value
`Ref<ComponentPublicInstance | null>` - A ref to the input component.
```

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

### Teleport Datepicker Menu

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

Use the `teleport` prop to position the datepicker menu. Set to `true` to place the menu on the `body` tag, or provide an element ID as a string.

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

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

Place custom content within the calendar days. The `day` prop is the day number, and `date` is the Date object for that day.

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

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

### cleared

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

Emitted when the date value is cleared using the clear button.

```APIDOC
## @cleared

### Description
Emitted when the value is cleared via the clear button.

### Type
`() => void`
```

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

### tooltip-close

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

Emitted when a marker tooltip is closed, providing the marker data.

```APIDOC
## @tooltip-close

### Description
Emitted when the marker tooltip is closed.

### Parameters
* `marker` (Marker) - The marker data associated with the tooltip.

### Type
`(marker: Marker) => void`
```

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

### Local Component Registration (Composition API)

Source: https://vue3datepicker.com/installation

Register the Vue Datepicker component locally within a component using the Composition API. Ensure to import and return the component.

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

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

### Configure Seconds Increment and Enable Seconds

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

Set the increment value for seconds when using the arrow controls and enable the seconds display. This allows for precise second adjustments.

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

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

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

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

### Enable Model Auto Mode

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

Set `model-auto` to `true` to automatically switch between range and single picker modes. Ensure the `range` prop is provided and `range.partialRange` is `true` for compatibility.

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

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

### text-input

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

Emitted when the `text-input` prop is enabled and the input value changes. It provides the propagated input event and the parsed date.

```APIDOC
## @text-input

### Description
Emits when `text-input` prop is enabled and input value is changed.

### Type
`(event: Event, parsedDate: Date | null) => void`

### Notes
* `event` - Propagated value from the `@input` event
* `parsedDate` - Result of a parsed date (returns `null` if unable to parse)
```

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

### date-click

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

Emits the date value when a specific date is clicked on the calendar.

```APIDOC
## @date-click

### Description
Emits a date value when the date is clicked on the calendar.
```

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

### Enable Range Selection

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

Use the `range` prop to allow users to select a range of two dates. The `v-model` will store an array of two date objects.

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

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

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

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

### Customize Seconds Overlay Header

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

Add custom content to the seconds overlay header when seconds are enabled. The `toggle` function is available.

```vue
<template>
  <VueDatePicker v-model="date" :time-config="{ enableSeconds: true }">
    <template #seconds-overlay-header="{ toggle }">
      <div>
        <span>Seconds</span>
      </div>
    </template>
  </VueDatePicker>
</template>

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

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

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

### selectDate

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

When called and there is an active selection, it will select that date.

```APIDOC
## selectDate

### Description
When called and there is an active selection, it will select that date.

### Method
`selectDate()`

### Parameters
None
```

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

### Custom Time Picker Overlay

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

Replaces the entire overlay in the time picker. It exposes hours, minutes, and functions to set them. Use this to create custom time selection interfaces.

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

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

### menu-unmounted

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

Emitted when the menu component of the datepicker is unmounted, providing the menu's HTML element.

```APIDOC
## @menu-unmounted

### Description
Emits when the menu component is unmounted.

### Type
`(el: HTMLElement) => void`

### Parameters
* `el` (HTMLElement) - The menu HTML element.
```

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

### Customize Month Picker Overlay

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

Replaces the entire content of the month picker overlay. Allows custom month selection using a dropdown and provides functions to update the month/year and toggle the overlay.

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

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

### am-pm-change

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

Emitted when the AM/PM toggle button is clicked in the time picker.

```APIDOC
## @am-pm-change

### Description
Emitted when the `am / pm` button is clicked in the time picker.

### Type
`(value: 'AM' | 'PM') => void`
```

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

### Replace Calendar Icon

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

Replace the 'back to calendar' icon using the `calendar-icon` slot.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #calendar-icon>
      <img src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

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

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