Skip to content
On this page

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 show-now-button prop is enabled

One prop is available:

  • selectCurrentDate - Function to call to select the date
Code Example
vue
<template>
    <Datepicker v-model="date" show-now-button>
      <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 is-24 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">
      <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>

This slot will allow you to add custom content on the left side of the menu.

Note

If you use preset-ranges prop, the sidebar will be added before the ranges' placement

Code Example
vue
<template>
    <Datepicker v-model="date">
      <template #left-sidebar>
        <div>Custom content</div>
      </template>
    </Datepicker>
</template>

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

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

This slot will allow you to add custom content on the right side of the menu.

Code Example
vue
<template>
    <Datepicker v-model="date">
      <template #right-sidebar>
        <div>Custom content</div>
      </template>
    </Datepicker>
</template>

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

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

marker-tooltip

This slot replaces the content inside the marker tooltip

Two props are available:

  • tooltop - The tooltip data provided in the array
  • day - The date marker is displayed on
Code Example
vue

<template>
    <Datepicker v-model="date" :markers="markers">
      <template #marker-tooltip="{ tooltop, day }">
        <div>Custom content on {{ day }}</div>
      </template>
    </Datepicker>
</template>

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

import addDays from 'date-fns/addDays';

export default {
    setup() {

        const date = ref(new Date());
        const markers = ref([
          {
            date: addDays(new Date(), 1),
            type: 'dot',
            tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
          },
          {
            date: addDays(new Date(), 2),
            type: 'line',
            tooltip: [
              { text: 'First tooltip', color: 'blue' },
              { text: 'Second tooltip', color: 'yellow' },
            ],
          },
          {
            date: addDays(new Date(), 3),
            type: 'dot',
            color: 'yellow',
          },
        ])
      
        return {
            date,
            markers,
        }
    }
}
</script>

Released under the MIT License.