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.

What is the format you want the selected date in ? eg: DD-MM-YYYY for 01-04-2017 — Dhyey, Jun 25 '17 at 08:12

Andriy · Accepted Answer · 2017-06-25T13:44:33.647

4

When we choose a date in the date picker, the selection is stored and manipulated in GMT (according to Greenwich timezone) time, but displayed back to the user in the formatted representation, taking into account user's current timezone. So stored and displayed dates are different (except of the users within timezone +0, like Greenwich).

When stringifying JS Date object, we get clear Greenwich timezone time, we can see it at https://time.is/GMT. What you probably expect to see is time representation formatted with your current timezone. See difference in my example.

// get current time
let date = new Date();
console.log('NATIVE JS DATE TIME', date.toString());
console.log('STRINGIFIED TIME', JSON.stringify(date));
console.log('FORMATTED TIME', `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);

you can use very convenient moment's format() function for displaying date.

edited Jun 25 '17 at 13:44

answered Jun 25 '17 at 09:50

Andriy

14,781
4
46
50

Thanks @Andriy ! Yes, it's Greenwich time actually instead of a bug of Material Datepicker. When I use moment to format that date returned by Datepicker, it's the right date. – Softhinker.com Jun 25 '17 at 20:49
1

Ok, with that in mind, my date is being stored correctly (using the format YYYY-MM-DD) in the database, but when I get from the backend and I show it inside the mat-datepicker (using the MAT_DATE_LOCALE = 'pt', using format DD-MM-YYYY) it shows 1 day before. What should I do to deal with it? – ErickXavier Jun 06 '18 at 20:10
try to store date as a timestamp integer value and not as string date representation (which is probably affected already by your timezone). Stored date value should be in UTC. When displaying it calendar will accept UTC time and transform / format taking in account your current timezone – Andriy Jun 06 '18 at 20:22

score 3 · Answer 2 · answered Aug 07 '19 at 08:08

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

score 1 · Answer 3 · answered Aug 23 '20 at 08:25

One thing we need to understand how Date work. let me go through some example that how we can create a date object.

new Date('2020-08-22') // 22 aug 2020(your expect result)

the output of the above date depended on your time zone when you pass date like that it considers as GMT.it add offset according to your time zone. let's say you are in +0500 than it will print

Sat Aug 22 2020 05:00:00 GMT+0500

it adds 5h to your date.

if you are in -0500 so it will

Fri Aug 21 2020 19:00:00 GMT-0500

if you want Date always give you the date that you pass without adding offset.

new Date(2020,07,22)

Sat Aug 22 2020 00:00:00 GMT+0500

It not add an hour(offset) to a date object.

I just resolve the issue by the second approach and it's working for me.

score 0 · Answer 4 · answered Apr 14 '21 at 06:19

I am using PHP and SQL and I store the dates in the default format, like 2021-04-12 00:00:00. I want to store the actual value the user gave in, so I don't bother with converting time zones. It is irrelevant, when in the day the post was written I only want a good date representation.

This is why I store the given date's local time:

let phpDate = `${selectedDate.getFullYear()}-${selectedDate.getMonth()+1}-${selectedDate.getDate()} 00:00:00`;
// Notice that we have to add 1 to the zero-based JS month

Parse the stored date:

this.date = new Date(
        Number(d.substr(0, 4)),
        Number(d.substr(5, 2)) -1, // we need to subtract 1 because JS mont is 0-based
        Number(d.substr(8, 2)));
    })

score 0 · Answer 5 · answered May 09 '21 at 08:37

I hope this will help... just get the value of formgroup and store in const and reassign the value of formcontrol once used datePipe

import { DatePipe } from '@angular/common';

Just use the Datepipe in component.ts file and add in component providers and constructors

private datePipe: DatePipe,

providers: [DatePipe]

Inside the submit function

const commonForm = {
              ...this.pollAdd.value,
            };
            commonForm.endDate=this.datePipe.transform(this.pollAdd.value.endDate, 'yyyy-MM-dd');
            commonForm.startDate=this.datePipe.transform(this.pollAdd.value.startDate, 'yyyy-MM-dd');

workaholic · Answer 6 · 2022-04-09T08:02:35.390

I know this is old but it's still a problem with at least Angular 12 and a mat-datepicker. Instead of screwing around with dates, I decided to take a more straightforward approach.

To restate the problem, I'm using a datepicker from Angular Material. When I type in 10/18/2018 in the field and then focus out of it, nothing happens. But if the user types in 2018-10-18, it gets changed around to 10/17/2018. This confuses the user.

Since that is the only input format that seems to be problematic, I use that format and do a simple text transposition.

In my template / .html file:

      <input matInput
         id="cod-input"
         formControlName="commercialOperationDate"
         [min]="minDate"
         [max]="maxDate"
         [matDatepicker]="$any(codPicker)"
         (change)="saveDateValue()"
         (focusout)="formatDate()">
  <mat-datepicker-toggle matSuffix
                         [for]="codPicker"></mat-datepicker-toggle>
  <mat-datepicker #codPicker></mat-datepicker>

In my component / .ts file:

public saveDateValue(): void {
  this._codValue = (document.getElementById('cod-input') as HTMLInputElement).value;
}

public formatDate(): void {
  const dateValue: string = this._codValue;

  if (/^\d{4}-\d{2}-\d{2}$/.exec(dateValue)) {
    length = dateValue.length;
    const newDateStr =
      `${dateValue.substring(length - 5, length - 3)}
      /${dateValue.substring(length - 2)}
      /${dateValue.substring(0, length - 6)}`;
    this.accountLookupForm.get('commercialOperationDate').setValue(new Date(newDateStr))
  }
}

To summarize, I save the actual text value of the input field when it is updated by the user. When the user changes focus, I check the text against the problematic regex. And then then I literally just create a new string and set a date based off of the corrected format.

I'm not sure how "professional" this all is, but it sure does work. Even if I hit enter to submit the form while still in the datepicker's input field.

score 0 · Answer 7 · answered Aug 03 '22 at 02:01

I fixed this easily with "string concatenation".

In the .component.html

<!-- date of birth -->
    <mat-form-field>
      <input matInput readonly [matDatepicker]="picker" placeholder="Date of birth" formControlName="dob" (dateChange)="formatDate($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="handleError('dob', 'required')">Date of birth is required</mat-error>
    </mat-form-field>

In the .component.ts

/* format date */
formatDate(e: any) {
  var d = new Date(e.target.value)
  var convertDate = d.toISOString().substring(0, 10) + d.toISOString().substring(10,);
  this.actorForm.get('dob')?.setValue(convertDate, { onlyself: true });
}

See my answer to this case at https://stackoverflow.com/a/73215526/15280648

score -1 · Answer 8 · answered Jan 08 '20 at 09:58

-1

use following conversion it will solve your problem .

  date =  new Date(this.moment(date).utcOffset('+0000').format('YYYY-MM-DD HH:MM'))

answered Jan 08 '20 at 09:58

Rahul

1,554
4
16
22

Angular Material DatePicker: Date becomes one day before selected date

8 Answers8