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
<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
<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
<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(--c-text-accent);
      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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>
Last Updated: