angulartypescripttimezonemat-datepicker

Change mat-datepicker selected date value according to a time zone


In ts. I have used a (dateChange)="setToDate($event.value)" to get selected date.

<mat-form-field appearance="outline">
        <input matInput [matDatepicker]="picker2" readonly = "readonly"  [(ngModel)] = "grid.todate" 
            (dateChange)="setToDate($event.value)" [min]="grid.fromdate">
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
    </mat-form-field>

I want to change that selected date to the server time zone witch is in GMT.

I have tried DatePip.

public setToDate(data: any): void {
    const todayDate  = new Date();
    this.todate = data._d;
    const changedDate = new DatePipe('en-Us').transform(data.toDate(), 'full', 'GMT');
}

The date picker picked the date at 00.00 am. Date pip will not give the time in GMT.

Here's a the example > https://stackblitz.com/edit/material-date-picker-csyldt?embed=1&file=app/app.component.ts


Solution

  • I have found a solution to convert that picked date to any time zone date(with the time it picked)

    setDate(newdate: string) {
        const _ = moment();
        const date = moment(newdate).add({hours: _.hour(), minutes:_.minute() , seconds:_.second()});
        this.date = date.toDate();
        this.gmtDate = new DatePipe('en-Us').transform(date, 'full', '+530');
      }
    }
    

    https://stackblitz.com/edit/material-date-picker-csyldt?embed=1&file=app/app.component.ts

    I have edited the stackblitz for the ones having the same problem.