Timepicker with timezone

Timepicker is working weird… Can I get some help please?
My system timezone is EST(GMT-500) and when target location’s timezone is US Central (GMT-600). The timepicker is automatically keep reducing 1 hours like it’s stuck in loop. (Checked using (onTempChange))
It’s working fine with event calendar and datepicker but I’m only having issue with timepicker.
I’ve tried with v5.13.5 and 5.14.1 and both have same issue.

below is the simple version of my code (Angular)

// html
<mbsc-datepicker [ngModel]=“time” [options]=“timePickerOptions” (onClose)=“setTime($event )” #timePicker>

ts
import * as moment from “moment-timezone”;
import { momentTimezone } from ‘@mobiscroll/angular’;
momentTimezone.moment = moment;

public momentPlugin = momentTimezone;
public location;

@ViewChild(‘timePicker’, {static: false}) timePicker: MbscDatepicker;
public timePickerOptions: MbscDatepickerOptions = {
controls: [‘time’],
themeVariant :“light”,
theme: ‘ios’,
stepMinute: 15,
touchUi: false,
timezonePlugin: this.momentPlugin,
displayTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone, // initial value
};

// For my testing this returns “America/Chicago”
public get locationTimezone() {
if (this.location && this.location.timezone) return this.location.timezone;
else return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

ngOnInit() {

this.locationService.getLocation.pipe(takeUntil(this.unsubscriber)).subscribe(location => {
this.location = location;
this.objService.getObj.pipe(takeUntil(this.unsubscriber)).subscribe(obj => {
this.time = moment(obj.time.toDate()).tz(this.locationTimezone);
// tried to set timezone after subscribe location object
console.log(this.currLocationTimezone) // “America/Chicago”
this.timePickerOptions.displayTimezone = this.currLocationTimezone;
this.timePicker.options.displayTimezone = this.currLocationTimezone;

Hi @reshift :wave:

At the moment we don’t have timezone support for the Date and time picker components. This is why it’s not working.

However, happy to let you know, the team is actually shaping up support for time zones in the date picker. I added your voice to that feature request and when we have any news about it, I’ll let you know.

Hello @reshift :wave:

Good news: we have shipped Mobiscroll 5.15, where we added support for timezones. The dataTimezone and displayTimezone options enable you to store the value in one timezone, and then display it in another. We use external libraries to handle the timezone information, currently supporting moment-timezone and luxon .

Working example: Calendar Timezones Example | Mobiscroll.

Here you can find a guide of how you can update the Mobiscroll version to the latest: Update guide on the latest version of Mobiscroll for plain JS, jQuery, Angular, Ionic and React.