VueDayCalendar
Open Source

Select Date

tips: you can open the console to view the print log.

Select Change

When you select a date, you can get the selected date by listening to the @select event.

<script setup lang="ts">
  import type { EventSelect } from 'vue-day-calendar'

  import VueDayCalendar from 'vue-day-calendar'

  function handleSelect(value: EventSelect) {
    console.log('select value', value)
  }
</script>

<template>
  <VueDayCalendar @select="handleSelect"/>
</template>
December 2024
SuMoTuWeThFrSa
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

v-model select

Of course, sometimes listening to the select event is not enough, you can also customize the selected date through v-model.

<script setup lang="ts">
  import { computed, ref } from 'vue'

  import VueDayCalendar from 'vue-day-calendar'

  const select = ref('2024-04-13')
  const selectText = computed(() => {
    return select.value
      ? `You picked ${selected.value}`
      : 'Please pick a day.'
  })
</script>

<template>
  <VueDayCalendar v-model="select">
    <template #footer>
      <span class="text-sm">{{ selectText }}</span>
    </template>
  </VueDayCalendar>
</template>
December 2024
SuMoTuWeThFrSa
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
You picked：2024-4-13

Selecting Multiple Days

Use mode="multiple" to allow the selection of multiple days.

<script setup lang="ts">
  import { ref } from 'vue'

  import VueDayCalendar from 'vue-day-calendar'

  const selected = ref([])
</script>

<template>
  <VueDayCalendar v-model="selected" mode="multiple">
    <div class="text-sm">
      <div v-if="selected.length">
        <p>You picked:</p>
        <div class="gap-2 grid grid-cols-2">
          <span v-for="item in selected" :key="item" class="btn">
            {{ item }}
          </span>
        </div>
      </div>
      <div v-else>
        Please pick a day.
      </div>
    </div>
  </VueDayCalendar>
</template>
December 2024
SuMoTuWeThFrSa
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
Please pick a day.

Selecting a Range of days

Use mode="range" allows you to select multiple days to form a date range.

<script setup lang="ts">
  import { ref } from 'vue'

  import VueDayCalendar from 'vue-day-calendar'

  const selected = ref([])
</script>

<template>
  <VueDayCalendar v-model="selected" mode="range">
    <template #footer>
      <div class="text-sm">
        <div v-if="selected.length">
          <p>You picked:</p>
          <div class="flex gap-2 items-center">
            <div>[</div>
            <span v-for="item in selected" :key="item" class="btn">
              {{ item }}
            </span>
            <div>]</div>
          </div>
        </div>
        <div v-else>
          Please pick a day.
        </div>
      </div>
    </template>
  </vuedaycalendar>
</template>
December 2024
SuMoTuWeThFrSa
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
Please pick a day.