Use the dateFormat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.
Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the timeWheels options.
Interested in learning about localization? Check out how the return format changes based on locale →
Demo
<MbscDatepicker
:controls="['calendar']"
/><MbscDatepicker
:controls="['calendar']"
dateFormat="DD.MM.YYYY"
/><MbscDatepicker
:controls="['calendar']"
dateFormat="D MMMM YYYY"
/><MbscDatepicker
:controls="['calendar']"
dateFormat="DDD DD MMM, YYYY"
/><MbscDatepicker
:controls="['calendar']"
dateFormat="YYYY-MM-DD"
/><MbscDatepicker
:controls="['calendar']"
dateFormat="DDD, DD MMM YYYY"
/><MbscDatepicker
:controls="['time']"
/><MbscDatepicker
:controls="['time']"
timeFormat="hh:mm A"
/><MbscDatepicker
:controls="['time']"
timeFormat="HH:mm"
/><MbscDatepicker
:controls="['time']"
timeFormat="HH:mm:ss"
/><MbscDatepicker
:controls="['calendar', 'time']"
timeFormat="HH:mm:ss"
/><MbscDatepicker
:controls="['calendar', 'time']"
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
/>SFC JSSFC TS
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const currentWeek = ['2026-11-04T00:00', '2026-11-10T00:00']
const currentTime = ['2026-11-04T14:00', '2026-11-04T16:00']
const rangeValue = currentWeek
const separatorValue = currentWeek
const monthValue = currentWeek
const dayValue = currentWeek
const atomValue = currentWeek
const cookieValue = currentWeek
const timeValue = currentTime
const h12Value = currentTime
const h24Value = currentTime
const hmsValue = currentTime
const dateTimeValue = currentTime
const dayNameValue = currentTime
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date</div>
<MbscDatepicker
:controls="['calendar']"
select="range"
label="Default"
v-model="rangeValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DD.MM.YYYY"
label="Separator"
v-model="separatorValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="D MMMM YYYY"
label="Month name"
v-model="monthValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DDD DD MMM, YYYY"
label="Day of week"
v-model="dayValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="YYYY-MM-DD"
label="ATOM"
v-model="atomValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DDD, DD MMM YYYY"
label="COOKIE"
v-model="cookieValue"
/>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Time</div>
<MbscDatepicker
:controls="['time']"
select="range"
label="Default time"
v-model="timeValue"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="hh:mm A"
label="12 h"
v-model="h12Value"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="HH:mm"
label="24 h"
v-model="h24Value"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="HH:mm:ss"
label="Hour, min, sec"
v-model="hmsValue"
/>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date & Time</div>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
label="Date & Time"
v-model="dateTimeValue"
/>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
v-model="dayNameValue"
/>
</div>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const currentWeek = ['2026-11-04T00:00', '2026-11-10T00:00']
const currentTime = ['2026-11-04T14:00', '2026-11-04T16:00']
const rangeValue = currentWeek
const separatorValue = currentWeek
const monthValue = currentWeek
const dayValue = currentWeek
const atomValue = currentWeek
const cookieValue = currentWeek
const timeValue = currentTime
const h12Value = currentTime
const h24Value = currentTime
const hmsValue = currentTime
const dateTimeValue = currentTime
const dayNameValue = currentTime
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date</div>
<MbscDatepicker
:controls="['calendar']"
select="range"
label="Default"
v-model="rangeValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DD.MM.YYYY"
label="Separator"
v-model="separatorValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="D MMMM YYYY"
label="Month name"
v-model="monthValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DDD DD MMM, YYYY"
label="Day of week"
v-model="dayValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="YYYY-MM-DD"
label="ATOM"
v-model="atomValue"
/>
<MbscDatepicker
:controls="['calendar']"
select="range"
dateFormat="DDD, DD MMM YYYY"
label="COOKIE"
v-model="cookieValue"
/>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Time</div>
<MbscDatepicker
:controls="['time']"
select="range"
label="Default time"
v-model="timeValue"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="hh:mm A"
label="12 h"
v-model="h12Value"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="HH:mm"
label="24 h"
v-model="h24Value"
/>
<MbscDatepicker
:controls="['time']"
select="range"
timeFormat="HH:mm:ss"
label="Hour, min, sec"
v-model="hmsValue"
/>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date & Time</div>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
label="Date & Time"
v-model="dateTimeValue"
/>
<MbscDatepicker
:controls="['calendar', 'time']"
select="range"
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
v-model="dayNameValue"
/>
</div>
</MbscPage>
</template>