Initializing the picker
The date picker can be used on a Mobiscroll input or any other input part of an existing form.
There are two ways to use the date picker:
- 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
Date picker with input
Use it on any external input by passing the component to the inputComponent option.
<template>
<MbscDatepicker
:controls="['date']"
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.
Embeddable date 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="['date']"
display="inline"
/>
</template>SFC JSSFC TS
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['date']" inputComponent="input" placeholder="Please Select..." />
<MbscDatepicker
:controls="['date']"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscDatepicker :controls="['date']" display="inline" />
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker :controls="['date']" inputComponent="input" placeholder="Please Select..." />
<MbscDatepicker
:controls="['date']"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscDatepicker :controls="['date']" display="inline" />
</MbscPage>
</template>