Understanding Controls
The picker supports multiple controls:
- Calendar view - can be used on its own or combined with a time scroller
- Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
- Time picker - can be used separately or together with a date picker or calendar
- Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop
Use the controls option (expecting an array) to configure the picker.
Demo
Renders a calendar view for range selection.
<MbscDatepicker
select="range"
:controls="['calendar']"
:touchUi="Renders a date scroller for touch and a dropdown for pointer interaction.
<MbscDatepicker
select="range"
:controls="['date']"
:touchUi="Renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.
<MbscDatepicker
select="range"
:controls="['datetime']"
:touchUi="Renders a combined view of a calendar and time scroller/dropdown for date and time range selection.
<MbscDatepicker
select="range"
:controls="['calendar', 'time']"
:touchUi="
Renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the locale option that can be overridden.
<MbscDatepicker
select="range"
:controls="['time']"
:touchUi="<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['calendar']"
select="range"
label="Calendar"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['date']"
select="range"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['datetime']"
select="range"
label="Date & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
label="Calendar & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
select="range"
label="Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['calendar']"
select="range"
label="Calendar"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['date']"
select="range"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['datetime']"
select="range"
label="Date & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
label="Calendar & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
select="range"
label="Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</MbscPage>
</template>