Multi-Date Selection
To enable multiple selection set the selectMultiple option to true.
The selectMax option limits how many values can be selected.
To customize the header you can pass a headerText or turn selectCounter on to display a localized text with the number of dates selected.
Dynamically switching between single, multiple or range select can be done with option changes.
Demo
<template>
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
:selectMax="1 "
:selectCounter="true"
headerText=" "
/>
</template>
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['calendar']" :selectMultiple="true" display="inline" />
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
:selectMax="5"
display="inline"
headerText="Pick up to 5 days"
/>
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
:selectCounter="true"
display="inline"
/>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['calendar']" :selectMultiple="true" display="inline" />
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
:selectMax="5"
display="inline"
headerText="Pick up to 5 days"
/>
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
:selectCounter="true"
display="inline"
/>
</MbscPage>
</template>