Custom Date & Time Format
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
<mbsc-datepicker
[controls]="['calendar']">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar']"
dateFormat="DD.MM.YYYY">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar']"
dateFormat="D MMMM YYYY">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar']"
dateFormat="DDD DD MMM, YYYY">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar']"
dateFormat="YYYY-MM-DD">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar']"
dateFormat="DDD, DD MMM YYYY">
</mbsc-datepicker><mbsc-datepicker
[controls]="['time']">
</mbsc-datepicker><mbsc-datepicker
[controls]="['time']"
timeFormat="hh:mm A">
</mbsc-datepicker><mbsc-datepicker
[controls]="['time']"
timeFormat="HH:mm">
</mbsc-datepicker><mbsc-datepicker
[controls]="['time']"
timeFormat="HH:mm:ss">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar', 'time']"
timeFormat="hh:mm:ss">
</mbsc-datepicker><mbsc-datepicker
[controls]="['calendar', 'time']"
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|">
</mbsc-datepicker>ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const currentWeek: any = ['2026-10-21T00:00', '2026-10-27T00:00'];
const currentTime: any = ['2026-10-21T15:00', '2026-10-21T17:00'];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
rangeValue: any = currentWeek;
separatorValue: any = currentWeek;
monthValue: any = currentWeek;
dayValue: any = currentWeek;
atomValue: any = currentWeek;
cookieValue: any = currentWeek;
timeValue: any = currentTime;
h12Value: any = currentTime;
h24Value: any = currentTime;
hmsValue: any = currentTime;
dateTimeValue: any = currentTime;
dayNameValue: any = currentTime;
}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date</div>
<mbsc-datepicker [controls]="['calendar']" select="range" label="Default" [(ngModel)]="rangeValue"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
dateFormat="DD.MM.YYYY"
label="Separator"
[(ngModel)]="separatorValue"
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
dateFormat="D MMMM YYYY"
label="Month name"
[(ngModel)]="monthValue"
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
dateFormat="DDD DD MMM, YYYY"
label="Day of week"
[(ngModel)]="dayValue"
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
dateFormat="YYYY-MM-DD"
label="ATOM"
[(ngModel)]="atomValue"
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
dateFormat="DDD, DD MMM YYYY"
label="COOKIE"
[(ngModel)]="cookieValue"
></mbsc-datepicker>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Time</div>
<mbsc-datepicker [controls]="['time']" select="range" label="Default time" [(ngModel)]="timeValue"></mbsc-datepicker>
<mbsc-datepicker [controls]="['time']" select="range" timeFormat="hh:mm A" label="12 h" [(ngModel)]="h12Value"></mbsc-datepicker>
<mbsc-datepicker [controls]="['time']" select="range" timeFormat="HH:mm" label="24 h" [(ngModel)]="h24Value"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['time']"
select="range"
timeFormat="HH:mm:ss"
label="Hour, min, sec"
[(ngModel)]="hmsValue"
></mbsc-datepicker>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Date & Time</div>
<mbsc-datepicker [controls]="['calendar', 'time']" select="range" label="Date & Time" [(ngModel)]="dateTimeValue"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar', 'time']"
select="range"
dateFormat="DDD D MMM, YYYY"
timeFormat="H:mm"
dateWheels="|DDD D MMM, YYYY|"
label="Day name"
[(ngModel)]="dayNameValue"
></mbsc-datepicker>
</div>
</mbsc-page>