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.

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.

• javascript
• angular
• datepicker

• is it always this time: 22:00:00 on previous day? – Edwin Commented Jan 12, 2018 at 10:58
• Yes, it is always – Виталий Мудрый Commented Jan 12, 2018 at 11:03
• Have a look at the timezones between the server and the client. They could be different. You probably need to handle your timestamps in something like UTC unix timestamp which is standard always, then display it in the appropriate timezone – Dimitrios Matanis Commented Jan 12, 2018 at 11:08
• Maybe, but if I read date value in browser I get before day – Виталий Мудрый Commented Jan 12, 2018 at 11:32
• Three questions: (a) is it possible to your server to be in a different time zone from the client (world wide app) (b) is it necessary for the server to know the time in the client (I mean, is the server telling other clients in different timezones the current time of the original client) (c) can you provide more details (concrete use case)? Maybe you don't need to mess with the datepicker at all... – julianobrasil Commented Jan 13, 2018 at 18:13

7 Answers 7

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

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}}
  ]
})

Similar to the accepted answer, but a little less verbose and will keep the hours/minutes/seconds.

const dt = new Date(event.value);
const tz = dt.getTimezoneOffset();
const seconds = (dt.getTime() / 1000) - (tz * 60);

You may resolve it like this : For example, if your are getting date in -> one_day_back_date_value

var one_day_back_date_value = moment.tz(moment(date_value_from_backend), 0).format("YYYY-MM-DD");
date_value_from_backend = moment(one_day_back_date_value).toDate();

Please note : moment and moment-timezone libraries are must for this. Include moment library above the moment-timezone library.

if you are not using moment or dont want to override complete date-datapter then you can override native-date-adapter

@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
    } 
}

gist here

Try this and it resolved the issue and there is nothing to do with the datepicker

const d = new Date(fieldDate);
d.setMinutes(d.getMinutes() + d.getTimezoneOffset());
console.log(d);

I had similar problems, I solved it by converting the date/time, before sending to the server, using:

Example: (UTC Brazil) I typed "15/12/2020 22:30:00" and it sent: '2020-12-16T01:30:00.000Z'.

var date = new Date('2020-11-06T01:30:00.000Z');
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());
console.log(date.toLocaleTimeString());

See Date.prototype.getUTCDate()