Week Picker
Week selection can be configured by setting the select to 'preset-range'.
Control the parameters of the selection:
- Define the first day of the selection - Set it in the
firstSelectDayoption. It can be different than thefirstDayof the week set in localization - Define the number of days - The
selectSizeoption can be any number, where3means three days,7means a week and14means two weeks
Looking to select a range with custom start/end dates? See how start/end selection works →
Demo
First day of the selection
Number of weeks
<template>
<MbscDatepicker
select="preset-range"
:controls="['calendar']"
:firstSelectDay="1 "
:selectSize="7 "
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker
display="inline"
select="preset-range"
:controls="['calendar']"
:firstSelectDay="1"
:selectSize="14"
/>
</template>
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker
display="inline"
select="preset-range"
:controls="['calendar']"
:firstSelectDay="1"
:selectSize="14"
/>
</template>