Example
1. Basic Usage
Use v-model to bind start date and end date.
Start:
End:
Sample code
<script setup>
import { ref } from 'vue'
const start = ref(null)
const end = ref(null)
</script>
<template>
<input v-model="start" />
<input v-model="end" />
<range-calendar v-model:start="start" v-model:end="end" />
</template>
Sample code
<script setup>
import { ref, computed } from 'vue'
const attachElement = ref(null)
const attachDirection = ref('bottom')
const options = computed(() => ({
attachElement,
attachDirection: attachDirection.value
}))
</script>
<template>
<select v-model="attachDirection" ref="attachElement">
<option value="-" disabled>-</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
<br>
<range-calendar v-if="attachDirection !== '-'" :options="options" />
</template>
3. Type
The default select type of calendar is date, you can also change the type to select week, month, year.
Sample code
3.2 Month select calendar
3.2 Month select calendar
3.3 Year select calendar
4. Fixed span
fixSpan (type: number) property is provided to let the user select the fixed range.
Sample code
<script setup>
const start = ref(null)
const end = ref(null)
</script>
<template>
<range-calendar v-model:start="start" v-model:end="end" :options="{fixedSpan: 5}" />
</template>
5. Min span and max span
Type: number
minSpan and maxSpan are provided to restrict the minimum and maximum select range.
Sample code
<script setup>
const start = ref(null)
const end = ref(null)
</script>
<template>
<range-calendar
v-model:start="start"
v-model:end="end"
:options="{
minSpan: 5,
maxSpan: 10
}"
/>
</template>
6. Unavailable
Type: { from?: Date; to?: Date }[]
By passing the unavailable property to options, cells can be prevent from selecting.
Sample code
<script setup>
const start = ref(null)
const end = ref(null)
const [currentYear, currentMonth] = [new Date().getFullYear(), new Date().getMonth()]
const firstSunday = (6 - new Date(currentYear, currentMonth, 1).getDay()) % 6
const monthLength = new Date(currentYear, currentMonth + 1, -1).getDate()
const tick = Math.ceil((monthLength - firstSunday) / 7)
const unavailableOptions = {
unavailable: [...Array(tick)].map((_, index) => ({
from: new Date(currentYear, currentMonth, firstSunday + index * 7),
to: new Date(currentYear, currentMonth, firstSunday + 1 + index * 7)
}))
}
</script>
7. Passive mode
By default, the calendar use two way binding(v-model) to update start and end, but you can set the passive: true and emit change by clicking apply button, and reset select and emit cancel event by clicking cancel button.
Start:
End:
Sample code
<template>
<range-calendar
v-model:start="start"
v-model:end="end"
:options="{ passive: true }"
/>
</template>
8. Time selecting
You can enable time selecting by passing timeSelection: true to the options.
- Option
timeOptionsis provided to configure the behavior of time selection, check here
Start:
End:
Sample code
<template>
<range-calendar
v-model:start="start"
v-model:end="end"
:options="{ timeSelection: true }"
/>
</template>
9. Single select
By default, the calendar is used for selecting date range, but you can activating single select mode by passing singleSelect: true to the option.
You can combine timeSelection and singleSelect to select a single day with time range.
Start:
End:
Sample code
<template>
<range-calendar
v-model:start="start"
v-model:end="end"
:options="{ timeSelection: true, singleSelect: true }"
/>
</template>
10. Preset
You can pass the preset options for let user to select preset range in the calendar. The modifier receive current start and end, and should return the preset range of start and end.
Start:
End:
Sample code
<script>
const today = new Date()
const options = {
presets: [
{
text: 'Last 7 days',
modifier: () => {
return {
start: today,
end: new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000),
}
},
},
{
text: 'Last 30 days',
modifier: () => {
return {
start: today,
end: new Date(today.getTime() - 29 * 24 * 60 * 60 * 1000),
}
},
},
],
}
</script>
<template>
<range-calendar
v-model:start="start"
v-model:end="end"
:options="options"
/>
</template>
3.3 Year select calendar
4. Fixed span
fixSpan (type: number) property is provided to let the user select the fixed range.
Start:
End:
Start:
End:
Start:
End:
Start:
End: