Why is the date in datepicker angular showing the last day?

Question

I use datepicker c angular material. Here's the code:

<td [formGroup]="item">
 <div class="input-group">
  <div class="input-group-addon">
   <mat-datepicker-toggle mdSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
  </div>
  <input class="form-control" [matDatepicker]="picker" placeholder="Date" formControlName="date">
 </div>
</td>

Datapicker is in the form that sends it to the server when it is sent.

But the problem is that the values are transmitted over the last day.

For example, I chose 1/18/2018, but sent to the server 2018-01-17T22: 00: 00.000Z.

It's strange that the angular pipe for date converts the date correctly, but before displaying it, I have a request on the server for grouping by the month and the first day of the new month falls on the last day of the previous one.

Date I store in mongoose schema with type Date.

Maybe someone had a problem with this.

Thank you.

Answer 1

I solve this problem by converting datepicker date value to UTC. Here is example:

const d = new Date(<DATE FROM FORM FIELD>);
const date = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());

Maybe it's not elegant way to fix it but help me

Answer 2

I had a similar problem. I solved it by configuring Datepicker to use UTC dates. (It uses local time by default) Just add some providers on your component declaration :

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';

@Component({
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}
  ]
})