Issue with Angular Material date picker: Date Parsing UTC causing dates to display as one day earlier

Question

Issue with Angular Material date picker: Date Parsing UTC causing dates to display as one day earlier

After exploring numerous threads related to this issue and spending several days trying to find a solution, I may have stumbled upon a potential fix. However, the workaround feels too messy for my liking.

Similar to other users, I am encountering an issue with the Angular Material Datepicker, specifically mat-datepicker.

When I log the date value, it displays correctly as:

Wed Dec 24 1999 00:00:00 GMT+0100 (Mitteleuropäische Normalzeit)

But in the request payload, it appears as:

1999-12-23T23:00:00.000Z

My attempts so far include adding

{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }

to both my component and app.module.ts, but this has not resolved the issue.

As a temporary fix (before sending the request), I have implemented the following workaround:

 let newDate = new Date(this.personalForm.get("dateOfBirth").value);
 newDate.setMinutes(newDate.getMinutes() - newDate.getTimezoneOffset());

After making this adjustment, the console now logs:

Wed Dec 24 1999 01:00:00 GMT+0100 (Mitteleuropäische Normalzeit)

And the request payload is now correct:

1997-12-24T00:00:00.000Z

However, this solution may not work for individuals in different time zones such as GMT-0100. How can this issue be rectified properly?

It is worth noting that I also dynamically change the adapter if needed, as shown below:

 this._adapter.setLocale(this.translateService.currentLang);

angular typescript datepicker angular-material utc

Answer 1

Answer №1

Although the value displayed remains the same, it is the different date-time formats that give us distinct results, altering the appearance of the date itself!

For example:

(by default): 2019-06-11T19:00:00.000Z

is equivalent to (by UTCString): Tue, 11 Jun 2019 19:00:00 GMT

is equivalent to (by LocaleString): 6/12/2019, 12:00:00 AM

is equivalent to (by LocaleTimeString): 12:00:00 AM

There is no need for conversion, as the date object retains the exact time.

This stackblitz beautifully illustrates how a format can change the presentation while the date remains constant; Feel free to fork this stackblitz, make modifications, and leave a comment under this answer for any further queries.

relevant TS:

import {Component} from '@angular/core';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  planModel: any = {start_time: new Date() };
  constructor(){}

  dateChanged(evt){
    let selectedDate = new Date(evt);
    console.log("by default:", selectedDate);
    console.log("by UTCString:", selectedDate.toUTCString());
    console.log("by LocaleString:", selectedDate.toLocaleString());
    console.log("by LocaleTimeString:", selectedDate.toLocaleTimeString());
  }

}

relevant HTML:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date"
  [(ngModel)]="planModel.start_time"
  (ngModelChange)='dateChanged($event)'
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<hr/>

<p>By default: {{planModel.start_time}} </p>
<p>Medium date: {{planModel.start_time | date:'medium'}} </p>
<p>Short date: {{planModel.start_time | date:'short'}} </p>
<p>Short time: {{planModel.start_time | date: 'shortTime' }} </p>
<p>Medium time: {{planModel.start_time | date: 'mediumTime' }} </p>
<p>Long time: {{planModel.start_time | date: 'longTime' }} </p>
<p>Full time: {{planModel.start_time | date: 'fullTime' }} </p>

Answer 2

Although the value displayed remains the same, it is the different date-time formats that give us distinct results, altering the appearance of the date itself!

For example:

(by default): 2019-06-11T19:00:00.000Z

is equivalent to (by UTCString): Tue, 11 Jun 2019 19:00:00 GMT

is equivalent to (by LocaleString): 6/12/2019, 12:00:00 AM

is equivalent to (by LocaleTimeString): 12:00:00 AM

There is no need for conversion, as the date object retains the exact time.

This stackblitz beautifully illustrates how a format can change the presentation while the date remains constant; Feel free to fork this stackblitz, make modifications, and leave a comment under this answer for any further queries.

relevant TS:

import {Component} from '@angular/core';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  planModel: any = {start_time: new Date() };
  constructor(){}

  dateChanged(evt){
    let selectedDate = new Date(evt);
    console.log("by default:", selectedDate);
    console.log("by UTCString:", selectedDate.toUTCString());
    console.log("by LocaleString:", selectedDate.toLocaleString());
    console.log("by LocaleTimeString:", selectedDate.toLocaleTimeString());
  }

}

relevant HTML:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date"
  [(ngModel)]="planModel.start_time"
  (ngModelChange)='dateChanged($event)'
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<hr/>

<p>By default: {{planModel.start_time}} </p>
<p>Medium date: {{planModel.start_time | date:'medium'}} </p>
<p>Short date: {{planModel.start_time | date:'short'}} </p>
<p>Short time: {{planModel.start_time | date: 'shortTime' }} </p>
<p>Medium time: {{planModel.start_time | date: 'mediumTime' }} </p>
<p>Long time: {{planModel.start_time | date: 'longTime' }} </p>
<p>Full time: {{planModel.start_time | date: 'fullTime' }} </p>

Answer 3

Answer №2

Responding to an inaccurate response you provided…

11 PM UTC = 00:00+01:00 the next day (simultaneous)

On Wed, Dec 24, 1999, at 00:00:00 GMT+0100 (Central European Time) whereas in the request it is shown as

1999-12-23T23:00:00.000Z

These two representations signify the same point in time but viewed differently. One denotes 11 PM in UTC, while the other is one hour ahead of UTC, thus representing the initial moment of the following day. Transitioning from 11 PM on the 23rd to 00:00 on the 24th spans across midnight.

Interpreting

Interpret your input string as an Instant. The "Z" denotes UTC and is articulated as "Zulu". An Instant represents a moment in UTC, always being UTC by definition.

Your input string follows the standard ISO 8601 format. The java.time classes automatically utilize these standard formats for parsing/generating strings. Hence, there is no need to specify a format pattern.

Instant instant = Instant.parse( "1999-12-23T23:00:00.000Z" ) ;

A moment (consisting of a date, time-of-day, and an assigned time zone or offset-from-UTC) must be stored in a database column of a type similar to the standard-SQL type TIMESTAMP WITH TIME ZONE. Using a column type resembling TIMESTAMP WITHOUT TIME ZONE would be incorrect.

For database writes, transition from the basic building-block class of Instant to the more versatile OffsetDateTime class. JDBC drivers require support for the OffsetDateTime class in JDBC 4.2 and later versions, while support for Instant is optional.

OffsetDateTime odt = instant.atOffset( ZoneOffset.UTC ) ;

For writing to the database using a PreparedStatement, utilize a placeholder ?.

myPreparedStatement.setObject( … , odt ) ;

Retrieval.

OffsetDateTime odt = myResultSet.getObject( … , OffsetDateTime.class ) ;

This topic has been extensively covered on Stack Overflow. It is advised to search and explore further before posting.

`LocalDate`

If your objective is to solely track a date without considering time-of-day or time zone, employ LocalDate in Java and a DATE column in standard SQL.

Answer 4

Responding to an inaccurate response you provided…

11 PM UTC = 00:00+01:00 the next day (simultaneous)

On Wed, Dec 24, 1999, at 00:00:00 GMT+0100 (Central European Time) whereas in the request it is shown as

1999-12-23T23:00:00.000Z

These two representations signify the same point in time but viewed differently. One denotes 11 PM in UTC, while the other is one hour ahead of UTC, thus representing the initial moment of the following day. Transitioning from 11 PM on the 23rd to 00:00 on the 24th spans across midnight.

Interpreting

Interpret your input string as an Instant. The "Z" denotes UTC and is articulated as "Zulu". An Instant represents a moment in UTC, always being UTC by definition.

Your input string follows the standard ISO 8601 format. The java.time classes automatically utilize these standard formats for parsing/generating strings. Hence, there is no need to specify a format pattern.

Instant instant = Instant.parse( "1999-12-23T23:00:00.000Z" ) ;

A moment (consisting of a date, time-of-day, and an assigned time zone or offset-from-UTC) must be stored in a database column of a type similar to the standard-SQL type TIMESTAMP WITH TIME ZONE. Using a column type resembling TIMESTAMP WITHOUT TIME ZONE would be incorrect.

For database writes, transition from the basic building-block class of Instant to the more versatile OffsetDateTime class. JDBC drivers require support for the OffsetDateTime class in JDBC 4.2 and later versions, while support for Instant is optional.

OffsetDateTime odt = instant.atOffset( ZoneOffset.UTC ) ;

For writing to the database using a PreparedStatement, utilize a placeholder ?.

myPreparedStatement.setObject( … , odt ) ;

Retrieval.

OffsetDateTime odt = myResultSet.getObject( … , OffsetDateTime.class ) ;

This topic has been extensively covered on Stack Overflow. It is advised to search and explore further before posting.

`LocalDate`

If your objective is to solely track a date without considering time-of-day or time zone, employ LocalDate in Java and a DATE column in standard SQL.

Answer 5

Answer №3

After investigating, I discovered that the issue lay within my backend and required a deeper understanding to resolve.

In order to properly store the date in my Postgres Database:

     DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.ENGLISH);
     LocalDateTime lu = LocalDateTime.parse(lastUpdated, inputFormatter);
     LocalDateTime dob = LocalDateTime.parse(dateOfBirth, inputFormatter);

     this.dateOfBirth = Date.from(dob.atZone(ZoneOffset.UTC).toInstant());
     this.lastUpdated = Date.from(lu.atZone(ZoneOffset.UTC).toInstant());

Prior to this, I had:

 this.dateOfBirth = Date.from(dob.atZone(ZoneId.systemDefault()).toInstant());

which was incorrect. I decided to handle the request as provided by Angular, allowing Java to correctly store it in the database.

1999-12-23T23:00:00.000Z

is transformed into

1997-12-24 00:00:00

Answer 6

After investigating, I discovered that the issue lay within my backend and required a deeper understanding to resolve.

In order to properly store the date in my Postgres Database:

     DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.ENGLISH);
     LocalDateTime lu = LocalDateTime.parse(lastUpdated, inputFormatter);
     LocalDateTime dob = LocalDateTime.parse(dateOfBirth, inputFormatter);

     this.dateOfBirth = Date.from(dob.atZone(ZoneOffset.UTC).toInstant());
     this.lastUpdated = Date.from(lu.atZone(ZoneOffset.UTC).toInstant());

Prior to this, I had:

 this.dateOfBirth = Date.from(dob.atZone(ZoneId.systemDefault()).toInstant());

which was incorrect. I decided to handle the request as provided by Angular, allowing Java to correctly store it in the database.

1999-12-23T23:00:00.000Z

is transformed into

1997-12-24 00:00:00

Answer 7

Answer №4

My clever workaround for this issue involved creating a simple method that converts the date to a string without any additional information. This string is then mapped to a datetime object in the backend and saved.

public formatDate(date: any): string {
    const chosenDate = new Date(date);
    return `${chosenDate.getMonth() + 1}/${chosenDate.getDate()}/${chosenDate.getFullYear()}`;
}

After formatting the date, I simply set the object value in the HTML

<mat-form-field appearance="outline">
    <mat-label>Birthdate</mat-label>
    <input matInput [matDatepicker]="birthdatePicker" placeholder="Birthdate" 
        (dateChange)="user.birthdate = formatDate($event.value)">
    <mat-datepicker-toggle matSuffix [for]="birthdatePicker"></mat-datepicker-toggle>
    <mat-datepicker #birthdatePicker></mat-datepicker>
    <mat-error>error</mat-error>
</mat-form-field>

Answer 8

My clever workaround for this issue involved creating a simple method that converts the date to a string without any additional information. This string is then mapped to a datetime object in the backend and saved.

public formatDate(date: any): string {
    const chosenDate = new Date(date);
    return `${chosenDate.getMonth() + 1}/${chosenDate.getDate()}/${chosenDate.getFullYear()}`;
}

After formatting the date, I simply set the object value in the HTML

<mat-form-field appearance="outline">
    <mat-label>Birthdate</mat-label>
    <input matInput [matDatepicker]="birthdatePicker" placeholder="Birthdate" 
        (dateChange)="user.birthdate = formatDate($event.value)">
    <mat-datepicker-toggle matSuffix [for]="birthdatePicker"></mat-datepicker-toggle>
    <mat-datepicker #birthdatePicker></mat-datepicker>
    <mat-error>error</mat-error>
</mat-form-field>

Issue with Angular Material date picker: Date Parsing UTC causing dates to display as one day earlier

Answer №1

Answer №2

11 PM UTC = 00:00+01:00 the next day (simultaneous)

Interpreting

`LocalDate`

Answer №3

Answer №4

Similar questions

Guide to starting the Angular 2 server within ASP.NET MVC

Tips for passing an object to a child control

Calling GraphQL mutations in ReactPGA

Modifying the default value setting in MUI Datepicker

In the absence of localstorage, what alternatives do we have for storing values?

How can time duration be accurately represented in TypeScript?

Problem with Infragistics radio button not firing change event when value is set manually

Am I utilizing Angular's signals correctly? And what is the purpose of still requiring ChangeDetectorRef.detectChanges()?

Tips for validating and narrowing a type in TypeScript using isNull instead of isNonNullable

Check out the computed typescript types

What is the best approach for managing multiple post requests in Angular?

Generating a fresh instance of input value in Angular2

Creating a button that displays the current day with Angular

Focusing on an input element in Angular2+

Can TypeScript automatically deduce keys from a changing object structure?

Guide on invoking an HTML event method from a parent component to a child component

How to temporarily modify/add CSS class in Angular 2

Restrict the number of subscriptions allowed for an rxjs observable

How can one point to a parameter within the documentation of a TypeScript function?

I am having trouble setting a component to show up as inline-block in Angular2