feat(material/core): improve date parsing in the NativeDateAdapter

Improve date parsing by taking the supplied locale into account for date component ordering
and inferring current year if it hasn't been supplied.

Author: wartab

src/material/core/datetime/native-date-adapter.spec.ts

@@ -1,6 +1,6 @@
 import {LOCALE_ID} from '@angular/core';
 import {waitForAsync, inject, TestBed} from '@angular/core/testing';
-import {DEC, FEB, JAN, MAR} from '../../testing';
+import {DEC, FEB, JAN, JUL, JUN, MAR} from '../../testing';
 import {DateAdapter, MAT_DATE_LOCALE, NativeDateAdapter, NativeDateModule} from './index';
 
 describe('NativeDateAdapter', () => {
@@ -464,6 +464,24 @@ describe('NativeDateAdapter', () => {
   it('should not throw when attempting to format a date with a year greater than 9999', () => {
     expect(() => adapter.format(new Date(10000, 1, 1), {})).not.toThrow();
   });
+
+  it('should parse strings taking locale date formats into account', () => {
+    adapter.setLocale('fr-BE');
+    expect(adapter.parse('6/7/2023')).toEqual(new Date(2023, JUL, 6));
+    expect(adapter.parse('7/6/2023')).toEqual(new Date(2023, JUN, 7));
+    adapter.setLocale('en-US');
+    expect(adapter.parse('7/6/2023')).toEqual(new Date(2023, JUN, 7));
+    expect(adapter.parse('7/6/2023')).toEqual(new Date(2023, JUL, 6));
+  });
+
+  it('should infer current year if not supplied when parsing', () => {
+    expect(adapter.parse('01-01')).toEqual(new Date(new Date().getFullYear(), JAN, 1));
+  });
+
+  it('should not return dates with a non zero local time component when parsing', () => {
+    expect(adapter.parse('2023-01-01')).toEqual(new Date(2023, JAN, 1, 0, 0, 0));
+    expect(adapter.parse('1-1-2023')).toEqual(new Date(2023, JAN, 1, 0, 0, 0));
+  });
 });
 
 describe('NativeDateAdapter with MAT_DATE_LOCALE override', () => {

src/material/core/datetime/native-date-adapter.ts

@@ -17,6 +17,8 @@ import {DateAdapter, MAT_DATE_LOCALE} from './date-adapter';
 const ISO_8601_REGEX =
   /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
 
+const DATE_COMPONENT_SEPARATOR_REGEX = /[ \/.:,'"|\\_-]+/;
+
 /** Creates an array and fills it with values. */
 function range<T>(length: number, valueFunction: (index: number) => T): T[] {
   const valuesArray = Array(length);
@@ -118,7 +120,7 @@ export class NativeDateAdapter extends DateAdapter<Date> {
 
     let result = this._createDateWithOverflow(year, month, date);
     // Check that the date wasn't above the upper bound for the month, causing the month to overflow
-    if (result.getMonth() != month && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    if (result.getMonth() !== month && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       throw Error(`Invalid date "${date}" for month with index "${month}".`);
     }
 
@@ -135,7 +137,65 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     if (typeof value == 'number') {
       return new Date(value);
     }
-    return value ? new Date(Date.parse(value)) : null;
+
+    if (!value) {
+      return null;
+    }
+
+    if (typeof value !== 'string') {
+      return new Date(value);
+    }
+
+    const dateParts = (value as string)
+      .trim()
+      .split(DATE_COMPONENT_SEPARATOR_REGEX)
+      .map(part => parseInt(part, 10))
+      .filter(part => !isNaN(part));
+
+    if (dateParts.length < 2) {
+      return this.invalid();
+    }
+
+    const localeFormatParts = Intl.DateTimeFormat(this.locale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    }).formatToParts();
+
+    let year: number | null = null;
+    let month: number | null = null;
+    let day: number | null = null;
+
+    const valueHasYear = dateParts.length > 2;
+
+    if (!valueHasYear) {
+      // Year is implied to be current year if only 2 date components are given.
+      year = new Date().getFullYear();
+    }
+
+    let parsedPartIndex = 0;
+
+    for (const part of localeFormatParts) {
+      switch (part.type) {
+        case 'year':
+          if (valueHasYear) {
+            year = dateParts[parsedPartIndex++];
+          }
+          break;
+        case 'month':
+          month = dateParts[parsedPartIndex++] - 1;
+          break;
+        case 'day':
+          day = dateParts[parsedPartIndex++];
+          break;
+      }
+    }
+
+    if (year !== null && month !== null && day !== null && this._dateComponentsAreValid(year, month, day)) {
+      return this.createDate(year, month, day);
+    }
+
+    return this._nativeParseFallback(value);
   }
 
   format(date: Date, displayFormat: Object): string {
@@ -257,4 +317,47 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
     return dtf.format(d);
   }
+
+  private _nativeParseFallback(value: string): Date {
+    const date = new Date(Date.parse(value));
+    if (!this.isValid(date)) {
+      return date;
+    }
+
+    // Native parsing sometimes assumes UTC, sometimes does not.
+    // We have to remove the difference between the two in order to get the date as a local date.
+
+    const compareDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
+    const difference = date.getTime() - compareDate.getTime();
+    if (difference === 0) {
+      return date;
+    }
+
+    return new Date(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate(),
+      date.getUTCHours(),
+      date.getUTCMinutes(),
+      date.getUTCSeconds(),
+      date.getUTCMilliseconds(),
+    );
+  }
+
+  private _dateComponentsAreValid(year: number, month: number, day: number) {
+    if (year < 0 || year > 9999 || month < 0 || month > 11 || day < 1 || day > 31) {
+      return false;
+    }
+
+    if (month === 1) {
+      const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+      return isLeapYear ? day <= 29 : day <= 28;
+    }
+
+    if (month === 3 || month === 5 || month === 8 || month === 10) {
+      return day <= 30;
+    }
+
+    return true;
+  }
 }