Date Formats
The date & time picker works with different date types:
- JS date object - a common way of passing a date is through a Date object:
new Date(1995, 11, 17, 15, 24)(make sure to not simply pass a date string tonew Date()) - ISO date string - standardized way of passing dates:
'2008-09-15T15:53:00'(make sure to pass it as a string) - Moment.js object - a great solution that solves common date management difficulties:
moment([2018, 3, 27, 12, 15])(make sure to have moment.js loaded)
When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.
Demo
JS date object
html<mbsc-datepicker
[(ngModel)]="date"
returnFormat="jsdate">
</mbsc-datepicker>
tsthis.date = new Date(2020, 10, 15, 10, 45);
ISO date string
html<mbsc-datepicker
[(ngModel)]="date"
returnFormat="iso8601">
</mbsc-datepicker>
tsthis.date = '2020-05-20T12:30:00';
Moment.js object
html<mbsc-datepicker
[(ngModel)]="date"
returnFormat="moment">
</mbsc-datepicker>
tsthis.date = moment([2020, 2, 6, 15, 30]);
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
import moment from 'moment';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
date: Date | undefined;
iso: string | undefined;
momentJs: any;
setDate(): void {
this.date = new Date(2020, 10, 15, 10, 45);
}
setISO(): void {
this.iso = '2020-05-20T12:30:00';
}
setMoment(): void {
// Make sure that moment js is loaded
this.momentJs = moment([2020, 2, 6, 15, 30]);
}
}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Controlling the default value</div>
<div class="mbsc-button-group-block">
<mbsc-button (click)="setDate()">Set: Sun Nov 15 2020 03:24:00 GMT</mbsc-button>
</div>
<mbsc-datepicker [controls]="['calendar']" [(ngModel)]="date" returnFormat="jsdate" label="Date object">Date object</mbsc-datepicker>
</div>
<div class="mbsc-padding">Return value: {{date}}</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Working with Date strings</div>
<div class="mbsc-button-group-block">
<mbsc-button (click)="setISO()">Set: 2020-05-20T12:30:00</mbsc-button>
</div>
<div>
<mbsc-datepicker [controls]="['calendar']" [(ngModel)]="iso" returnFormat="iso8601" label="ISO string"></mbsc-datepicker>
</div>
</div>
<div class="mbsc-padding">Return value: {{iso}}</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Working with Moment JS Objects</div>
<div class="mbsc-button-group-block">
<mbsc-button (click)="setMoment()">Set: 2020-03-06T15:30:00+02:00</mbsc-button>
</div>
<div>
<mbsc-datepicker [controls]="['calendar']" [(ngModel)]="momentJs" returnFormat="moment" label="Moment JS"></mbsc-datepicker>
</div>
</div>
<div class="mbsc-padding">Return value: {{momentJs ? momentJs.format() : ''}}</div>
</mbsc-page>