Angular Material DatePicker: Date becomes one day before selected date

Question

I'm using latest Angular 4 and Angular-Material2-2.0.0-beta7. This is my template using MdDatePicker:

<md-input-container fxFlex="33" class="birthday-container">
    <input mdInput name="birthday" placeholder="Birthday" required [(ngModel)]="member.birthday" [mdDatepicker]="birthdayPicker">
    <button mdSuffix [mdDatepickerToggle]="birthdayPicker"></button>
</md-input-container>
<md-datepicker #birthdayPicker></md-datepicker>

In app.module, here is the provider:

{provide: DateAdapter, useClass: NativeDateAdapter}

And member.birthday is Date type. But when JSON.stringify(member.birthday), it becomes one day before the selected date. For example:

Select 2017-4-1 from date picker, and the stringified result is 2017-03-31T13:00:00.000Z.

This post raised the same question but I'm not sure how to apply moment.js to the code.

Answer 1

I solved it by creating a custom date adapter (which inherits the native date adapter) and overriding create-date method to remove timezone offset

@Injectable({        providedIn: 'root' }) 
export class CustomDateAdapterService extends NativeDateAdapter {    
    public createDate(year: number, month: number, date: number): Date {
        const localDate = super.createDate(year, month, date);
        const offset = localDate.getTimezoneOffset() * 60000;
        return new Date(localDate.getTime() - offset); // utcDate
    } 
}

you can have a look at complete gist here