1

This is a pretty common problem that people have asked about and I fixed my original issue using information from this question: Angular Material Datepicker shows one day behind in Angular 9 when I click search button

I assume that this was an issue because as the question states the date picker is defaulting to local time for me, which is MTN instead of UTC which I need it to be.

All I did was concatenate T00:00:00 to the end of my date values when I get them in the NgOnInit function and the dates began to appear correctly in the date picker:

  this.adjustData.forEach((element) => {
            element.checkoutDate = element.checkoutDate + 'T00:00:00';
          });

However, when I change the date the value in the date field changes to the day before the date I select despite the value of the date being correct. For example, if I change checkoutDate to the 22nd from the 23rd the value of checkoutDate is correct when logged to the console but it appears in the date picker as the 21st.

This is my date picker:

<mat-form-field id="datePicker{{adj.checkoutDate}}" class="example-full-width" appearance="fill" type="date">
            <mat-label>Choose a date</mat-label>
            <input matInput [min]="yesterday" [max]="today" [matDatepicker]="picker" value="{{adj.checkoutDate}}" (dateChange)="onChangeDate($event, adj)">
            <mat-hint>MM/DD/YYYY</mat-hint>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

There must be a more robust way to correct this issue but I'm not sure what it is. If you need any further information to help answer this question I would be happy to provide it.

Cole Perry
  • 197
  • 21

1 Answers1

1

Indeed, it is a pretty common problem and the typical culprit is daylight saving time or conversion between local and target time which results in the wrong date.

For a simple naive solution, if you only care about date set the time to T12:00:00 - so even if it shifts a couple of hours here/there at least you will have the correct date.

Other solution would be just to use/save/read the date. As material calendar can also consume dates. But that also won't work if your backend or database assumes correct timestamps.

  <input matInput [matDatepicker]="picker" value="2022-06-24">

Probably the most robust way would to save the date as ISO timestamp (without timezone) and when reading back, not to transform it into local time, not to account for DLS just read the face value of the ISO date string - can't go wrong that way?

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Setting the date to ````T12:00:00```` results in the exact problem as my fix that I wrote above. The date initially appears correctly because I am adding ````T00:00:00```` to it. But at the moment that I change the date to say yesterday the date picker sets the date to 2 days ago instead. Despite this, the actual value of ````adj.checkoutDate```` is correct; yesterday. The problem is in appearance only; the visual representation of the date in the picker. What I currently have is functionally correct. It is just visually confusing. I am going to try the second fix right now. – Cole Perry Jun 24 '22 at 18:45