Slots

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

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" position="left">
        <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
            <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-right: 5px;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Last Updated: 10/15/2021, 2:32:43 PM