Skip to content
On this page

Custom Attributes

VDatePicker uses the following props to display date selections:

Select Attribute

AttributeDescription
select-attributeAttribute used to represent the selected value.
drag-attributeAttribute used to represent the dragged value. Valid only when mode === "range".

To customize these attributes, we just need to provide our own custom attributes objects. Any attributes we provide will replace the default ones.

For example, we can use a dot instead of a highlight to denote the selected date. All we would need to do is pass a new select-attribute:

Value:10/15/2023, 8:04:19 PM (Date)
S
M
T
W
T
F
S
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
1
2
3
4
5
6
7
8
9
10
11
vue
<template>
  <VDatePicker v-model="date" :select-attribute="selectAttribute" />
</template>

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

const date = ref(new Date());
const selectAttribute = ref({ dot: true });
</script>

Selection Popover

Finally, let's customize the select-attribute and drag-attribute to add a popover as the user is selecting a new range.

To accomplish this, we also need to include the day-popover slot, and configure the popover in the attribute.

We'll first try to display the dragged range, then fall back to the selected range.

Start:1/6/2020, 12:00:00 AM (date)
End:1/10/2020, 12:00:00 AM (date)
S
M
T
W
T
F
S
29
30
31
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
1
2
3
4
5
6
7
8
vue
<template>
  <VDatePicker
    v-model.range="range"
    :select-attribute="selectDragAttribute"
    :drag-attribute="selectDragAttribute"
    @drag="dragValue = $event"
  >
    <template #day-popover="{ format }">
      <div class="text-sm">
        {{ format(dragValue ? dragValue.start : range.start, 'MMM D') }}
        -
        {{ format(dragValue ? dragValue.end : range.end, 'MMM D') }}
      </div>
    </template>
  </VDatePicker>
</template>

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

const range = ref({
  start: new Date(2020, 0, 6),
  end: new Date(2020, 0, 10),
});
const dragValue = ref(null);
const selectDragAttribute = computed(() => ({
  popover: {
    visibility: 'hover',
    isInteractive: false,
  },
}));
</script>

Released under the MIT License.