title: Change mat-datepicker selected date value according to a time zone
body: <p>In ts. I have used a  <strong>(dateChange)="setToDate($event.value)"</strong> to get selected date.</p>
  
  <pre><code>&lt;mat-form-field appearance="outline"&gt;
          &lt;input matInput [matDatepicker]="picker2" readonly = "readonly"  [(ngModel)] = "grid.todate" 
              (dateChange)="setToDate($event.value)" [min]="grid.fromdate"&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="picker2"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #picker2&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I want to change that selected date to the server time zone witch is in GMT.</p>
  
  <p>I have tried DatePip.</p>
  
  <pre><code>public setToDate(data: any): void {
      const todayDate  = new Date();
      this.todate = data._d;
      const changedDate = new DatePipe('en-Us').transform(data.toDate(), 'full', 'GMT');
  }
  </code></pre>
  
  <p>The date picker picked the date at 00.00 am. Date pip will not give the time in GMT.</p>
  
  <p>Here's a the example >
  <a href="https://stackblitz.com/edit/material-date-picker-csyldt?embed=1&amp;file=app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/material-date-picker-csyldt?embed=1&amp;file=app/app.component.ts</a></p>