### Install with bun

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Install the component using bun.

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

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

### Install with pnpm

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Install the component using pnpm.

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

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

### Install NPM Dependencies with pnpm

Source: https://github.com/vuepic/vue-datepicker/blob/main/CONTRIBUTING.md

Use this command to install project dependencies when contributing. Ensure you have pnpm installed.

```bash
pnpm install
```

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

### Start Development Server

Source: https://github.com/vuepic/vue-datepicker/blob/main/CONTRIBUTING.md

Run this command from the 'playground' folder to start the development server for local testing.

```bash
pnpm dev
```

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

### Install with yarn

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Install the component using yarn.

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

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

### Install with npm

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Install the component using npm.

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

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

### Install @vuepic/vue-datepicker with bun

Source: https://github.com/vuepic/vue-datepicker/blob/main/README.md

Install the datepicker component using bun. This is a newer package manager that can be used for your Vue 3 project.

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

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

### Install @vuepic/vue-datepicker with yarn

Source: https://github.com/vuepic/vue-datepicker/blob/main/README.md

Install the datepicker component using yarn. This is an alternative package manager for adding the component to your project.

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

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

### Local Registration with Script Setup

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Register the VueDatePicker component locally within a component using the <script setup> syntax. Ensure the CSS is imported.

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

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

### Install @vuepic/vue-datepicker with npm

Source: https://github.com/vuepic/vue-datepicker/blob/main/README.md

Install the datepicker component using npm. This is the primary method for adding the package to your Vue 3 project.

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

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

### Set Week Start to Monday

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/migration/from-v12.md

To maintain the previous default behavior of starting the week on Monday, explicitly set the `week-start` prop to `WeekStart.Monday`. This is necessary because the default locale now starts the week on Sunday.

```vue
<template>
  <!--[!code --]-->
  <VueDatePicker />
  <!-- [!code ++]-->
  <VueDatePicker :week-start="WeekStart.Monday" /> 
</template>

<script lang="ts" setup>
  import { WeekStart } from "@vuepic/vue-datepicker"
</script> 
```

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

### Install @vuepic/vue-datepicker with pnpm

Source: https://github.com/vuepic/vue-datepicker/blob/main/README.md

Install the datepicker component using pnpm. This is another package manager option for your Vue 3 project.

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

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

### Full Example with Type Casting

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/sections/index.md

A complete Vue component example demonstrating the usage of the 'month-year' slot with TypeScript. It shows how to conditionally render the custom selects based on the `mode` prop and includes type casting for the slot data.

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

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

### Set Start Date for Vue Datepicker

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Demonstrates how to set a specific start date for the Vue Datepicker component. This ensures the calendar opens to a preselected month and year.

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

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

### Set Default Start Time for Time Picker

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/time-picker-configuration/index.md

Use `startTime` to specify a default starting time for the picker. The format can be an object for a single picker or an array of objects for a range picker. If not provided, the current time is used.

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

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

### Set Initial Focus to Start Date

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Use the `focus-start-date` prop to open the datepicker menu focused on the provided `start-date`, ignoring the `v-model` value.

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

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

### Calling Datepicker Methods with a Ref

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Demonstrates how to get a reference to the Vue Datepicker component using `useTemplateRef` and call its methods, such as `closeMenu()`, from external script logic.

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

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

### Configure Preset Dates with Custom Slots

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Configure preset date ranges or specific dates that appear in a sidebar. This example demonstrates providing custom slots for preset date buttons, allowing for custom rendering and interaction.

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

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

### Enable inline mode with text input

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Configure the datepicker to display inline and enable text input for date selection. This example also enables auto-apply.

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

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

### Enable Date Range Selection

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes/index.md

Use the `range` prop to allow users to select a start and end date. The `v-model` will hold an array of two dates. This prop can also accept a `RangeConfig` object for further customization.

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

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

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

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

### Vue Datepicker with Fixed Start Date

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Allows only the adjustment of the second date in a range. Ensure `v-model` is provided with both dates. Do not use 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>
```

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

### Customize Month Overlay Header

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/overlay/index.md

Add custom content to the header of the month picker overlay. This example shows how to add a 'Go back' link that toggles the overlay when clicked.

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

```

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

### Configure Year Range for Selection

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Set the `year-range` prop to an array of two numbers to define the start and end years available for selection in the year 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>
```

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

### Custom Time Picker Component

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/sections/index.md

Use the 'time-picker' slot to create a custom time selection interface with dropdowns for hours and minutes. This example demonstrates generating hour and minute arrays and binding them to select elements.

```vue
<template>
  <VueDatePicker v-model="date">
    <template #time-picker="{ time, updateTime }">
      <div style="display: flex; width: 100%; gap: 5px;">
        <select 
          style="width: 100%" 
          :value="time.hours"
          @change="updateTime({ ...time, hours: +$event.target.value })"
        >
          <option 
            v-for="h in hoursArray"
            :key="h.value"
            :value="h.value">{{ h.text }}</option>
        </select>
        <select
          style="width: 100%"
          :value="time.minutes"
          @change="updateTime({...time, minutes: +$event.target.value })"
        >
          <option 
            v-for="m in minutesArray"
            :key="m.value"
            :value="m.value">{{ m.text }}</option>
          </select>
      </div>
     </template>
  </VueDatePicker>
</template>

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

  const date = ref(new Date());
  
  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>
```

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

### Configure text input mask format

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Define a mask format for the text input to guide user input. This is an alpha feature and currently supports single date pickers.

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

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

### @range-start

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

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

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

### Run Vue Datepicker Tests

Source: https://github.com/vuepic/vue-datepicker/blob/main/CONTRIBUTING.md

Execute the test suite for the @vuepic/vue-datepicker package. This is a mandatory step for all contributions.

```bash
pnpm --filter @vuepic/vue-datepicker test
```

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

### openMenu

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Opens the datepicker menu.

```APIDOC
## openMenu

### Description
Opens the datepicker menu.

### Method
`openMenu()`

### Parameters
None

### Response
None
```

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

### Build Vue Datepicker Package

Source: https://github.com/vuepic/vue-datepicker/blob/main/CONTRIBUTING.md

This script builds the @vuepic/vue-datepicker package. It's part of the required checks before submitting changes.

```bash
pnpm --filter @vuepic/vue-datepicker build
```

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

### Allowing End Time Before Start Time in Range Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Configure the time picker to allow the end time to be before the start time in range mode by setting `disableTimeRangeValidation` to true. This is useful for specific scheduling scenarios.

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

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

### @open

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

Emitted when the datepicker menu is opened.

```APIDOC
## @open

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

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

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

### switchView

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Manually show an overlay for month, year, or time views.

```APIDOC
## switchView

### Description
Manually show an overlay for month, year, or time views.

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

### Parameters
* **view** ('month' | 'year' | 'calendar' | 'time') - The view to switch to. Passing 'calendar' will close the overlay.
* **instance** (number) - Optional. The instance number of the calendar if multiple calendars are present (0 for the first calendar).

### Response
None
```

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

### Set Datepicker Locale

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/localization/index.md

Use the `locale` prop to set the language for the datepicker. This example demonstrates setting the locale to Chinese 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>
```

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

### Set Preview Date Format

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/formatting/index.md

Use the `formats.preview` prop to define the desired format for the selected date in the preview section. If not provided, it inherits the `input` 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>
```

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

### Nuxt Configuration for Transpilation

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Configure your Nuxt project to transpile the @vuepic/vue-datepicker package by adding it to `build.transpile` in `nuxt.config.ts`.

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

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

### Vue Datepicker with Maximum Range

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Sets the maximum number of days allowed between the selected start and end dates. Use this 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>
```

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

### Vue Datepicker with Minimum Range

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Sets the minimum number of days required between the selected start and end dates. Use this 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>
```

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

### Display Local Week Numbers

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Display week numbers in the calendar using the 'local' type. Ensure the array order for day names matches the week start configuration.

```vue
<template>
  <VueDatePicker v-model="date" :week-numbers="{ type: 'local' }" />
</template>

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

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

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

### @tooltip-open

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

Emitted when a marker's 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`
```

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

### Update `format` and `preview-format` props

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/migration/from-v11.md

The `format` and `preview-format` props are now grouped under the `formats` prop and renamed to `input` and `preview` respectively.

```vue
<template>
  <VueDatePicker format="dd.MM.yyyy"  preview-format="dd.MM.yyyy" />
  <VueDatePicker :formats="{ input: 'dd.MM.yyyy', preview: 'dd.MM.yyyy' }" />
</template>
```

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

### Vue Datepicker Input Formatting

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/formatting/index.md

Customizes the format of the selected date(s) shown in the input field. This example uses 'dd.MM.yyyy - HH:mm' for a specific date and time 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>
```

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

### executeFlow

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Triggers the datepicker flow again, even if the picker is in the open state. By default, the flow only triggers on initial mount.

```APIDOC
## executeFlow

### Description
Triggers the datepicker flow again, even if the picker is in the open state. By default, the flow only triggers on initial mount.

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

### Parameters
* **flowStep** ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds') - Optional. The specific step of the flow to trigger.

### Response
None
```

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

### @menu-mounted

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

Emits when the menu component has been mounted to the DOM.

```APIDOC
## @menu-mounted

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

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

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

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

### Configure Action Row Buttons

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Customize the labels and visibility of buttons in the action row. Use `showPreview` to control the preview button and `showNow` to add a button for selecting the current date and time.

```vue
<template>
  <VueDatePicker v-model="date" :action-row="{ showPreview: false, showNow: true }" />
</template>

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

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

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

### Set Hours Grid Increment in Time Picker

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/time-picker-configuration/index.md

Configure `hoursGridIncrement` to change the step value for hours in the overlay. The increment starts from 0 and goes 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>
```

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

### toggleMenu

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Manually toggle the picker menu (open or close).

```APIDOC
## toggleMenu

### Description
Manually toggle the picker menu (open or close).

### Method
`toggleMenu()`

### Parameters
None

### Response
None
```

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

### Disabling Auto-Switch for Range Selection

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Set `autoSwitchStartEnd` to `false` to disable the automatic switching of start and end dates when the user selects an earlier date for the end of the range. This allows for custom validation logic.

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

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

### transitions

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/look-and-feel/index.md

Controls the transitions inside the menu. Users can define custom transitions or disable them by providing a transition name or a boolean.

```APIDOC
## transitions

### Description
Controls transitions inside the menu. Users can define their own or disable them. Datepicker uses Vue's built-in `transitions` component.

### Type
`Transitions | boolean`

### Default
`true`

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

### Notes
- `open` and `close` are added when overlays show/hide.
- `next` and `previous` are added when switching months in the calendar.
- `menuAppearTop` is added when the menu opens above the input field.
- `menuAppearBottom` is added when the menu opens below the input field.
- `vNext` and `vPrevious` are added when switching months in the calendar in the [`vertical`](/props/modes/#vertical) mode.

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

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

### @overlay-toggle

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

Emits an event when an overlay (like month or year picker) is toggled, indicating its open state and the type of overlay.

```APIDOC
## @overlay-toggle

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

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

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

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

### Disabling Static Month View in Multi-Calendar Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Set `static` to `false` in the `multi-calendars` configuration to disable the static month view. The first calendar will auto-update based on the range start, and subsequent calendars will 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>
```

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

### Local Registration with Options API

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Register the VueDatePicker component locally using the Options API. Ensure the component and its CSS are imported.

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

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

### Custom Month-Year Select Component

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/sections/index.md

Use the 'month-year' slot to create a custom header for month and year selection. This example demonstrates replacing the default selects with custom ones, providing a warning about the unavailability of overlays and the different props provided based on the mode.

```vue
<template #month-year="{ month, year, months, years, updateMonthYear, handleMonthYearChange }">
          <div class="w-full flex gapped">
            <select 
                class="w-full"
                :value="month" 
                @change="(ev) => updateMonthYear(+ev.target.value, year)">
              <option v-for="m in months" :key="m.value" :value="m.value">{{ m.text }}</option>
            </select>
            <select 
                class="w-full"
                :value="year"
                @change="(ev) => updateMonthYear(month, +ev.target.value)">
              <option v-for="y in years" :key="y.value" :value="y.value">{{ y.text }}</option>
            </select>
          </div>
    </template>
```

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

### Custom Seconds Overlay Header

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/overlay/index.md

Implement custom content for the seconds selection overlay via the `seconds-overlay-header` slot. The `toggle` function can be used to control the overlay.

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

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

### Provide Custom Day Names

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Provide custom labels for day names in the calendar header. The array must have a length of 7 and its order should sync 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>
```

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

### Configure Date Selection Flow

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes/index.md

Define a custom selection order using the `flow` prop with a `steps` array. This allows control over the sequence of 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>
```

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

### ui

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/look-and-feel/index.md

Configure custom classes for specific elements within the datepicker UI, allowing for detailed styling control.

```APIDOC
## ui

### Description
Configure custom classes for a specific element.

### Type
```ts
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;
}
```

### Default
`{}`

### Notes
- `input` - Add a custom class to the input field.
- `menu` - Add a custom class to the datepicker menu wrapper.
- `calendar` - Add a custom class to the calendar wrapper.
- `calendarCell` - Add a custom class to the calendar cell wrapper.
- `navBtnNext` - Add a custom class on navigation button 'next'.
- `navBtnPrev` - Add a custom class on navigation button 'previous'.
- `dayClass` - Add a custom class to the calendar cell depending on the date.

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

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

### Update `enable-time-picker`, `ignore-time-validation`, `enable-seconds`, `enable-minutes`, `is-24`, `no-hours-overlay`, `no-minutes-overlay`, `no-seconds-overlay`, `hours-grid-increment`, `minutes-grid-increment`, `seconds-grid-increment`, `time-picker-inline`, `start-time` props

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/migration/from-v11.md

These props are now grouped under the `time-config` prop. Prop types and names remain unchanged. Use camel case for multi-word props.

```vue
<template>
  <VueDatePicker :enable-time-picker="false" />
  <VueDatePicker :time-config="{ enableTimePicker: false }" />
</template>
```

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

### Enable Dark Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/look-and-feel/index.md

Switch the datepicker theme to dark mode by passing the `dark` prop.

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

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

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

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

### Log current date

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/timezone/index.md

Logs the current date and time with GMT offset and timezone information.

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

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

### inputRef

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Provides access to the internal `inputRef`, which is the input component (not the input field itself).

```APIDOC
## inputRef

### Description
Provides access to the internal `inputRef`, which is the input component (not the input field itself).

### Method
`inputRef()`

### Parameters
None

### Response
* **Ref<ComponentPublicInstance | null>** - A ref object pointing to the input component or null if not available.
```

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

### General CSS Variables for Datepicker

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/customization/theming/index.md

Configure general styling properties like font family, border radius, sizing, padding, and transitions for the datepicker component.

```css
:root {
  /*General*/
  --dp-font-family:
    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
  --dp-border-radius: 4px; /*Configurable border-radius*/
  --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
  --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/

  /*Sizing*/
  --dp-button-height: 35px; /*Size for buttons in overlays*/
  --dp-month-year-row-height: 35px; /*Height of the month-year select row*/
  --dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
  --dp-button-icon-height: 20px; /*Icon sizing in buttons*/
  --dp-cell-size: 35px; /*Width and height of calendar cell*/
  --dp-cell-padding: 5px; /*Padding in the cell*/
  --dp-common-padding: 10px; /*Common padding used*/
  --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
  --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
  --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
  --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
  --dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
  --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
  --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
  --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
  --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
  --dp-menu-padding: 6px 8px; /*Menu padding*/

  /*Font sizes*/
  --dp-font-size: 1rem; /*Default font-size*/
  --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
  --dp-time-font-size: 0.8rem; /*Font size in the time picker*/

  /*Transitions*/
  --dp-animation-duration: 0.1s; /*Transition duration*/
  --dp-menu-appear-transition-timing: cubic-bezier(0.4, 0, 1, 1); /*Timing on menu appear animation*/
  --dp-transition-timing: ease-out; /*Timing on slide animations*/
}
```

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

### Local Registration with Composition API

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/installation/index.md

Register the VueDatePicker component locally using the Composition API. Remember to import the component and its CSS.

```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 Six Weeks Display

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Use the `six-weeks` prop to ensure the calendar always displays six weeks, preventing dynamic height changes. Set to 'center' to distribute padding evenly.

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

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

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

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

### Helper Type Definitions

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/sections/index.md

Type definitions for `OverlayGridItem` and `SelectItem` used within the slot props. `OverlayGridItem` represents an item in a grid (like a month or year), while `SelectItem` is a generic type for select options.

```typescript
interface OverlayGridItem {
  value: number;
  text: string;
  active: boolean;
  disabled: boolean;
  className: Record<string, boolean | undefined>;
}

export interface SelectItem<T = number> {
  value: T;
  text: string;
}
```

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

### Vue Datepicker Configuration Interface

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Defines the structure for general configuration options for the Vue Datepicker. Use this interface to understand available properties for customization.

```typescript
interface Config {
  allowStopPropagation: boolean;
  closeOnScroll: boolean;
  modeHeight: number;
  allowPreventDefault: boolean;
  closeOnClearValue: boolean;
  closeOnAutoApply: boolean;
  noSwipe: boolean;
  keepActionRow: boolean;
  onClickOutside?: (validate: () => boolean, evt: PointerEvent) => void;
  tabOutClosesMenu: boolean;
  arrowLeft?: string;
  keepViewOnOffsetClick?: boolean;
  timeArrowHoldThreshold: number;
  shadowDom?: boolean;
  mobileBreakpoint: number;
  setDateOnMenuClose?: boolean;
  escClose?: boolean;
  spaceConfirm?: boolean;
  monthChangeOnArrows?: boolean;
  monthChangeOnScroll?: boolean | string;
  onInternalKeydown?: (ev: Event) => boolean | void;
}
```

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

### @range-end

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

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

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

### @text-input

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

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

```APIDOC
## @text-input

### Description
Emits when [`text-input`](/props/modes/#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).
```

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

### Custom Minutes Overlay Header

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/slots/overlay/index.md

Customize the minutes selection overlay using the `minutes-overlay-header` slot. The `toggle` function is available for managing overlay visibility.

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

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

### Enable Loading Overlay

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Add a loading overlay to the datepicker menu to indicate that data is being fetched or processed. This is a simple boolean prop.

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

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

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

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

### Configuring Solo Calendars in Multi-Calendar Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Use the `solo` option within the `multi-calendars` configuration object to make each calendar independent. This allows for distinct selections or views in each calendar.

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

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

### Replace `month-name-format` with `formats` Prop

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/migration/from-v11.md

To customize month name formatting, use the `formats` prop with Unicode tokens instead of the `month-name-format` prop.

```vue
<template>
  <!--[!code --]-->
  <VueDatePicker  month-name-format="long" />
  <!--[!code ++]-->
  <VueDatePicker :formats="{ month: 'MMMM' }" />
</template>
```

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

### Set Minimum Time

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/validation/index.md

Use the `min-time` prop to set the earliest available time for selection. Accepts an object with hours and minutes.

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

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

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

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

### Update flow prop and handleFlow method

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/migration/from-v13.md

Update the `flow` prop to remove the `partial` property and use `executeFlow` with a step value instead of `handleFlow` with an index.

```vue
<template>
  <VueDatePicker
    ref="dpRef"
    :flow="{
      steps: ['year', 'month', 'calendar'],
      // [!code --]
      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); // [!code --]
  dpRef.value?.executeFlow('month'); // [!code ++]

  function onFlowStep(stepIndex: number) {} // [!code --]
  function onFlowStep(step: PickerSection) {} // [!code ++]
</script> 
```

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

### Enable Quarter Picker Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes/index.md

Set the `quarter-picker` prop to `true` to allow users to select a quarter. The `v-model` will receive the first date of the selected quarter. When using date validation, ensure it's applied to the first day of the quarter.

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

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

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

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

### Vue Datepicker with timezone and date retrieval methods

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/timezone/index.md

Demonstrates a Vue Datepicker with UTC timezone and provides buttons to log the selected date in local and specified timezones.

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

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

### Enable Week Picker Mode

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes/index.md

Use the `week-picker` prop to enable the selection of 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>
```

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

### Vue Datepicker v-model Binding

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/general-configuration/index.md

Demonstrates how to bind the date value using v-model. Ensure the `model-value` type matches the picker mode.

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

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

### @text-submit

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/events/index.md

This event is emitted when the Enter key is pressed, provided that the `text-input` prop is enabled and `enterSubmit` is set to `true` within `text-input-options`.

```APIDOC
## @text-submit

### Description
Emitted when the enter key is pressed, if `text-input` is `true` and `enterSubmit` is `true` in `text-input-options`.

### Type
`() => void`

### Related Props
- [`text-input`](/props/modes/#text-input)
- [`text-input-options`](/props/modes-configuration/#text-input-options)
```

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

### Configure text input format

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/modes-configuration/index.md

Set a custom format for the text input field. This format will be used when the input is focused and a date is selected.

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

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

### Force Push to GitHub Repository

Source: https://github.com/vuepic/vue-datepicker/blob/main/CONTRIBUTING.md

Force push your changes to the specified branch on your GitHub repository. This updates your Pull Request.

```git
git push --force origin my-fix-branch
```

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

### Set Minutes Grid Increment in Time Picker

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/time-picker-configuration/index.md

Use `minutesGridIncrement` to define the step for minutes in the overlay. The increment ranges from 0 to 60 minutes.

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

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

### Vue Datepicker Quarter Formatting

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/props/formatting/index.md

Configures the format of the quarter name in the quarter picker. Uses 'qqqq' for a full quarter name.

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

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

### dpWrapMenuRef

Source: https://github.com/vuepic/vue-datepicker/blob/main/packages/docs/docs/methods-and-events/methods/index.md

Provides access to the internal `dpWrapMenuRef`, which is the `div` element that wraps the menu.

```APIDOC
## dpWrapMenuRef

### Description
Provides access to the internal `dpWrapMenuRef`, which is the `div` element that wraps the menu.

### Method
`dpWrapMenuRef()`

### Parameters
None

### Response
* **Ref<HTMLElement | null>** - A ref object pointing to the menu wrapper div element or null if not available.
```