Kendo ui datepicke time zone code example

Example: kendo datetime picket default timezone

Copy Codeimport { Component } from '@angular/core';
import { timezoneNames, ZonedDate } from '@progress/kendo-date-math';

import '@progress/kendo-date-math/tz/all';

const filterUncommon = list => list.filter(l => l.indexOf('/') > -1);
const timezones = filterUncommon(timezoneNames())
  .sort((a, b) => a.localeCompare(b));

@Component({
  selector: 'my-app',
  template: `
    <div class="row example-config">
      <div class="col-xs-12 example-col">
        <p>
          Current Universal Coordinated Time
        </p>
        {{ date.toGMTString() }}
      </div>
    </div>
    <div class="row example-config">
      <div class="col-xs-12 example-col">
        <p>
          Local time in
          <select [(ngModel)]="timezone">
             <option *ngFor="let z of allTimezones">{{z}}</option>
          </select>
        </p>
        {{ result.toString() }}
      </div>
    </div>
  `
})
export class AppComponent {
  public allTimezones: string[] = timezones;
  public timezone: string = 'Europe/Sofia';
  public date: Date;
  public result: Date;

  constructor() {
    this.tick();

    setInterval(() => this.tick(), 1000);
  }

  private tick(): void {
      this.date = new Date();
      this.convertTimezone();
  }

  private convertTimezone(): void {
    this.result = ZonedDate.fromLocalDate(this.date, this.timezone);
  }
}