Initializing the Picker
The range picker can be used on a Mobiscroll input or any other input part of an existing form.
There are three ways to use the range picker:
- Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
- Use it with two separate inputs of any type, one for
startand another forend - Embed the picker without an input. This can be the page itself or a more complex popup
Demo
Use it on any external input by passing the component to the inputComponent option.
<template>
<MbscDatepicker
select="range"
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.
Sometimes it makes sense to use two separate inputs for start and end. You can pass a reference through the startInput and endInput options of mobiscroll or any type of input, like an ion-input.
<script setup>
const startInput = ref(null)
const endInput = ref(null)
</script>
<template>
<MbscInput
ref="startInput"
label="Start"
placeholder="Please Select..." />
<MbscInput
ref="endInput"
label="End"
placeholder="Please Select..." />
<MbscDatepicker
select="range"
:startInput="startInput"
:endInput="endInput" />
</template>
It can be embedded into the page or a popup as an inline picker by setting the display option to inline. You can choose to initialize the picker on an input type="hidden" or just simply a div.
<template>
<MbscDatepicker
select="range"
display="inline"
/>
</template><script setup>
import { MbscDatepicker, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inputProps = {
placeholder: 'Please Select...'
}
const startInput = ref(null)
const endInput = ref(null)
</script>
<template>
<MbscPage>
<MbscDatepicker select="range" inputComponent="input" :inputProps="inputProps" />
<MbscDatepicker
select="range"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscInput ref="startInput" label="Start" placeholder="Please Select..." />
<MbscInput ref="endInput" label="End" placeholder="Please Select..." />
<MbscDatepicker select="range" :startInput="startInput" :endInput="endInput" />
<MbscDatepicker select="range" display="inline" />
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const inputProps = {
placeholder: 'Please Select...'
}
const startInput = ref<any>(null)
const endInput = ref<any>(null)
</script>
<template>
<MbscPage>
<MbscDatepicker select="range" inputComponent="input" :inputProps="inputProps" />
<MbscDatepicker
select="range"
label="Calendar"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<MbscInput ref="startInput" label="Start" placeholder="Please Select..." />
<MbscInput ref="endInput" label="End" placeholder="Please Select..." />
<MbscDatepicker select="range" :startInput="startInput" :endInput="endInput" />
<MbscDatepicker select="range" display="inline" />
</MbscPage>
</template>