Input Field or Inline Embed
The calendar can be used on a Mobiscroll input or any other input part of an existing form.
There are two ways to use the calendar:
- Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
- Embed the picker without an input. This can be the page itself or a more complex popup
Demo
Calendar picker with input
Use it on any external input by passing the component to the inputComponent option.
<template>
<MbscDatepicker
:controls="['calendar']"
inputComponent="input"
:inputProps="{
placeholder: 'Please Select...'
}"
/>
</template>If you don't pass a reference to an external input, the component takes care of generating its own input.
Multiple date selection
Use it for multiple date picking with a mobiscroll input and pill rendering for the selected values.
<template>
<MbscDatepicker
:controls="['calendar']"
:selectMultiple="true"
/>
</template>Embeddable calendar picker
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<template>
<MbscDatepicker
:controls="['calendar']"
display="inline"
/>
<template>SFC JSSFC TS
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inputProps = {
placeholder: 'Please Select...'
}
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['calendar']" inputComponent="input" :inputProps="inputProps" />
<MbscDatepicker
:controls="['calendar']"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscDatepicker :controls="['calendar']" display="inline" />
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inputProps = {
placeholder: 'Please Select...'
}
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['calendar']" inputComponent="input" :inputProps="inputProps" />
<MbscDatepicker
:controls="['calendar']"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscDatepicker :controls="['calendar']" display="inline" />
</MbscPage>
</template>