Date & time selection
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
Use controls: ['datetime'] for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - controls: ['date'] and controls: ['time']. It will render a scrollers for touchUi: true and a dropdowns for touchUi: false.
Demo
<MbscDatepicker
:controls="['datetime']"
:touchUi=" "
/>
<MbscDatepicker
:controls="['date', 'time']"
:touchUi=" "
/>
<!-- date picker -->
<MbscDatepicker
:controls="['date']"
:touchUi=" "
/>
<!-- time picker -->
<MbscDatepicker
:controls="['time']"
:touchUi=" "
/>
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['datetime']"
label="Compact date & time picker"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['date', 'time']"
label="Expanded date & time picker"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-6">
<MbscDatepicker
:controls="['date']"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</div>
<div class="mbsc-col-6">
<MbscDatepicker
:controls="['time']"
label="Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</div>
</div>
</div>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['datetime']"
label="Compact date & time picker"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['date', 'time']"
label="Expanded date & time picker"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-6">
<MbscDatepicker
:controls="['date']"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</div>
<div class="mbsc-col-6">
<MbscDatepicker
:controls="['time']"
label="Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</div>
</div>
</div>
</MbscPage>
</template>