Timezone Settings
The range works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of these three external libraries: luxon, moment-timezone and day.js. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the range expects this format and returns this format. It is'local'by default if the date-times don't contain any timezone informationdisplayTimezone- the calendar displays everything in this timezone. The date-times will be converted from thedataTimezoneand displayed accordingly. It is'local'by default
Invalids as well as marked, colored and labels date-times will all be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the calendar.
Demo
Data timezone is
Display timezone is
The local timezone your browser is in:
html<mbsc-datepicker
[controls]="['calendar', 'time']"
select="range"
dataTimezone="utc"
displayTimezone="local "
[timezonePlugin]="myDayjsTimezone"
[(ngModel)]="mySelected"
></mbsc-datepicker>
tsimport { dayjsTimezone } from '@mobiscroll/angular';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
// Extend Day.js with UTC and timezone plugins
dayjs.extend(utc);
dayjs.extend(timezone);
// Setup Mobiscroll Day.js plugin
dayjsTimezone.dayjs = dayjs;
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
myDayjsTimezone = dayjsTimezone;
mySelected = null;
}
Selected range is returned in "Data timezone"
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { dayjsTimezone, MbscModule, MbscTimezonePlugin, setOptions } from '@mobiscroll/angular';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
myTimezonePlugin: MbscTimezonePlugin = dayjsTimezone;
mySelected = null;
}
<mbsc-page>
<mbsc-datepicker
inputStyle="outline"
labelStyle="stacked"
label="Pick Date & Time in Display Timezone"
select="range"
[(ngModel)]="mySelected"
[timezonePlugin]="myTimezonePlugin"
[controls]="['calendar', 'time']"
></mbsc-datepicker>
<div class="mbsc-padding">
<p *ngIf="mySelected">
Selected<br />
<code>From: {{mySelected[0]}}</code><br />
<code>To: {{mySelected[1]}}</code>
</p>
</div>
</mbsc-page>