Slots

Below is a list of available slots which you can use to change some default elements of the datepicker

Content

Customize parts in the datepicker menu

calendar-header

Replace the content in the calendar header cells

Available props are:

day: Displayed value in the header cell
index: Column index it is rendered by

Code Example

vue

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

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

export default {
    setup() {
        const date = ref(new Date());
      
        return {
            date,
        }
    }
}
</script>

<style>
    .red-color {
        color: red;
    }
</style>

day

This slot allows you to place custom content in the calendar

This slot will also provide 2 props when used

day: This is the day number displayed in the calendar
date: This is the date value from that day

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #day="{ day, date }">
            <temlplate v-if="day === tomorrow">
              <img class="slot-icon" src="/logo.png"/>
            </temlplate>
            <template v-else>
              {{ day }}
            </template>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        const tomorrow = ref(new Date().getDate() + 1);
        
        return {
            date,
            tomorrow,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

action-select

This slot replaces the select and cancel button section in the action row

Code Example

vue

<template>
    <Datepicker v-model="date" ref="dp">
      <template #action-select>
        <p class="custom-select" @click="selectDate">Select</p>
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        const dp = ref();
        
        const selectDate = () => {
          ref.value.selectDate();
        }
        
        return {
            date,
            dp,
            selectDate,
        }
    }
}
</script>

<style>
    .custom-select {
      cursor: pointer;
      color: var(--vp-c-text-2);
      margin: 0;
      display: inline-block;
    }
</style>

action-preview

This slot replaces the date preview section in the action row

This slot will provide one prop

value: Current selection in the picker, this can be Date object, or in case of range, Date array

Code Example

vue

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

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

export default {
    setup() {
        const date = ref(new Date());
        const dp = ref();
      
        const getDate = (dateVal) => {
          const newDate = new Date(dateVal);

          return `Selected ${newDate.getDate()}`;
        }
        
        return {
            date,
            dp,
            getDate,
        }
    }
}
</script>

now-button

This slot replaces the content in the now button wrapper

TIP

To use this slot, make sure that showNowButton prop is enabled

One prop is available:

selectCurrentDate - Function to call to select the date

Code Example

vue

<template>
    <Datepicker v-model="date" showNowButton>
      <template #now-button="{ selectCurrentDate }">
        <span @click="selectCurrentDate()" title="Select current date">
          <img class="slot-icon" src="/logo.png" />
        </span>
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

<style>
  .slot-icon {
    height: 20px;
    width: auto;
    cursor: pointer;
  }
</style>

am-pm-button

This slot replaces the am-pm button in the time picker when the is24 prop is set to false

Two props are available:

toggle - Function to call to switch AM/PM
value - Currently active mode, AM or PM

Code Example

vue

<template>
    <Datepicker v-model="date" showNowButton>
      <template #am-pm-button="{ toggle, value }">
        <button @click="toggle">{{ value }}</button>
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

Trigger and input

Use custom input or trigger element

trigger

This slot replaces the input element with your custom element

This is some custom clickable text that will open datepicker

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #trigger>
            <p class="clickable-text">This is some custom clickable text that will open the datepicker</p>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .clickable-text {
        color: #1976d2;
        cursor: pointer;
    }
</style>

dp-input

This slot replaces the input field. The difference from the trigger slot is that you will have access to the input field properties

Available props are:

TIP

For functions to work correctly, make sure that the textInput prop is enabled

When calling onInput function, make sure to pass the input event as argument

value: Value displayed in the input field
- type: string
onInput: Function called on the @input event
- type: (event: Event) => void
onEnter: Function called on the @keydown.enter event
- type: () => void
onTab: Function called on the @keydown.tab event
- type: () => void
onClear: Function to call if you want to clear date
- type: () => void

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #dp-input="{ value, onInput, onEnter, onTab, onClear }">
          <input type="text" :value="value" />
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Icons

Change datepicker icons

input-icon

This slot replaces the calendar icon in the input element with your custom element

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #input-icon>
            <img class="input-slot-image" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .input-slot-image {
        height: 20px;
        width: auto;
        margin-left: 5px;
    }
</style>

clear-icon

This slot replaces the clear icon in the input element with your custom element

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #clear-icon="{ clear }">
            <img class="input-slot-image" src="/logo.png" @click="clear" />
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .input-slot-image {
        height: 20px;
        width: auto;
        margin-right: 5px;
    }
</style>

clock-icon

This slot replaces the default clock icon used to select the time

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #clock-icon>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

arrow-left

This slot replaces the arrow left icon on the month/year select row

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #arrow-left>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

arrow-right

This slot replaces the arrow right icon on the month/year select row

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #arrow-right>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

arrow-up

This slot replaces the arrow up icon in the time picker

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #arrow-up>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
       margin: 0 auto;
    }
</style>

arrow-down

This slot replaces the arrow down icon in the time picker

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #arrow-down>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
        margin: 0 auto;
    }
</style>

calendar-icon

This slot replaces the back to calendar icon

Code Example

vue

<template>
    <Datepicker v-model="date">
        <template #calendar-icon>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

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

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

Code Example

vue

<template>
    <Datepicker 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>
    </Datepicker>
</template>

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

export default {
    setup() {
        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;
      });
        
        return {
            date,
            hoursArray,
            minutesArray,
        }
    }
}
</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>
    <Datepicker v-model="date">
      <template #hours="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date">
      <template #minutes="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hours-overlay

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>
    <Datepicker v-model="date">
      <template #hours-overlay="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

minutes-overlay

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>
    <Datepicker v-model="date">
      <template #minutes-overlay="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            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>
    <Datepicker v-model="date">
      <template #month="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

year

This slot replaces the text in the year picker

One props is available

year: Displayed year

Code Example

vue

<template>
    <Datepicker v-model="date">
      <template #year="{ year }">
        {{ year }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

month-overlay

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>
    <Datepicker v-model="date">
      <template #month-overlay="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

year-overlay

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>
    <Datepicker v-model="date">
      <template #year-overlay="{ text, value }">
        {{ value }}
      </template>
    </Datepicker>
</template>

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

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Slots #

Content #

calendar-header #

day #

action-select #

action-preview #

now-button #

am-pm-button #

Trigger and input #

trigger #

dp-input #

Icons #

input-icon #

clear-icon #

clock-icon #

arrow-left #

arrow-right #

arrow-up #

arrow-down #

calendar-icon #

Overlay #

time-picker-overlay #

hours #

minutes #

hours-overlay #

minutes-overlay #

month #

year #

month-overlay #

year-overlay #

Slots

Content

calendar-header

day

action-select

action-preview

now-button

am-pm-button

Trigger and input

trigger

dp-input

Icons

input-icon

clear-icon

clock-icon

arrow-left

arrow-right

arrow-up

arrow-down

calendar-icon

Overlay

time-picker-overlay

hours

minutes

hours-overlay

minutes-overlay

month

year

month-overlay

year-overlay