Vue Datepicker

Appearance

Overlay ​

Customize overlay and overlay triggers

time-picker-overlay ​

This slot replaces the full overlay in the timepicker

Several props are available:

  • range: Value passed from general props
  • hours: Selected hours value
  • minutes: Selected minutes value
  • seconds: Selected seconds value
  • setHours: Function to call to set hours, (hours: number | number[]) => void
  • setMinutes: Function to call to set minutes, (minutes: number | number[]) => void
  • setSeconds: Function to call to set seconds, (seconds: number | number[]) => void

Info

If you are using range mode, make sure to pass number arrays in functions

Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #time-picker-overlay="{ hours, minutes, setHours, setMinutes }">
        <div class="time-picker-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 { ref } 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>

<style>
.time-picker-overlay {
  display: flex;
  height: 100%;
  flex-direction: column;
}
</style>
<template>
    <VueDatePicker v-model="date">
      <template #time-picker-overlay="{ hours, minutes, setHours, setMinutes }">
        <div class="time-picker-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 { ref } 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>

<style>
.time-picker-overlay {
  display: flex;
  height: 100%;
  flex-direction: column;
}
</style>

hours ​

This slot replaces the hours text between the arrows in the time picker

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #hours="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #hours="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

minutes ​

This slot replaces the minutes text between the arrows in the time picker

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #minutes="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #minutes="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

hours-overlay-value ​

This slot replaces the text in the hours overlay

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #hours-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #hours-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

minutes-overlay-value ​

This slot replaces the text in the minutes overlay

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #minutes-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #minutes-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

month ​

This slot replaces the text in the month picker

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #month="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #month="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

year ​

This slot replaces the text in the year picker

One props is available

  • value: Displayed year
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #year="{ value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #year="{ value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

month-overlay-value ​

This slot replaces the text in the month picker overlay

2 props are available

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

year-overlay-value ​

This slot replaces the text in the month picker overlay

2 props are available, although for the year, text and value are the same

  • text: Value displayed in the datepicker by default
  • value: Actual value used in the code
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>
<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

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

month-overlay ​

Replace the content in month overlay

This slot exposes the following:

  • month (number)
    • Selected month value
  • year (number)
    • Selected year value
  • items ( { text: string; value: number }[])
    • Generated array of months
  • updateMonthYear ((month: number, year: number) => void)
    • Exposed function to update month and year
  • instance (number)
    • In case of multi-calendars, instance is the order of the calendar
  • toggle (() => void)
    • Toggle overlay
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template 
          #month-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select 
                  class="select-input"
                  :value="month" 
                  @change="updateMonth($event, updateMonthYear, year, toggle)">
                <option v-for="m in items" :key="m.value" :value="m.value">{{ m.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateMonth = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    year: number,
    toggle: () => void) => {
      updateMonthYear(+(event.target as HTMLSelectElement).value, year);
      toggle();
};
</script>
<template>
    <VueDatePicker v-model="date">
      <template 
          #month-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select 
                  class="select-input"
                  :value="month" 
                  @change="updateMonth($event, updateMonthYear, year, toggle)">
                <option v-for="m in items" :key="m.value" :value="m.value">{{ m.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateMonth = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    year: number,
    toggle: () => void) => {
      updateMonthYear(+(event.target as HTMLSelectElement).value, year);
      toggle();
};
</script>

year-overlay ​

Replace the content in year overlay

This slot exposes the following:

  • month (number)
    • Selected month value
  • year (number)
    • Selected year value
  • items ( { text: string; value: number }[])
    • Generated array of years
  • updateMonthYear ((month: number, year: number) => void)
    • Exposed function to update month and year
  • instance (number)
    • In case of multi-calendars, instance is the order of the calendar
  • toggle (() => void)
    • Toggle overlay
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template 
          #year-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select
                  class="select-input"
                  :value="year"
                  @change="updateYear($event, updateMonthYear, month, toggle)"
              >
                <option v-for="y in items" :key="y.value" :value="y.value">{{ y.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateYear = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    month: number,
    toggle: () => void) => {
      updateMonthYear(month, +(event.target as HTMLSelectElement).value);
      toggle();
};
</script>
<template>
    <VueDatePicker v-model="date">
      <template 
          #year-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select
                  class="select-input"
                  :value="year"
                  @change="updateYear($event, updateMonthYear, month, toggle)"
              >
                <option v-for="y in items" :key="y.value" :value="y.value">{{ y.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateYear = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    month: number,
    toggle: () => void) => {
      updateMonthYear(month, +(event.target as HTMLSelectElement).value);
      toggle();
};
</script>

month-overlay-header ​

Add a custom content in the overlay header

Exposed function:

  • toggle (() => void)
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>
<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>

year-overlay-header ​

Add a custom content in the overlay header

Exposed function:

  • toggle (() => void)
Code Example
vue
<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>
<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>

Released under the MIT License.

Copyright © 2021-present Vuepic