Date Picker
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
When passing controls: ['calendar'], the date picker will render a monthly calendar for selecting a date.
Interested in dynamically switching between modes? Learn how to set up responsive behavior →
Demo
<MbscDatepicker
:controls="['calendar']"
/>SFC JSSFC TS
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker :controls="['calendar']" display="inline" />
</template>
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker :controls="['calendar']" display="inline" />
</template>