bug(DateAdapter): Date comparison is only checking partial info

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm developing an app with Material DatePicker and Luxon Date Adapter.
I gave my users the possibility to input seconds, milliseconds or full ISO date strings into my app's date inputs.
This works well except when pasting certain dates without deleting the input's value first (replacing value with CTRL+V).

I found out why, I was pasting dates which were on the same day (but different time values) as the previous date.

Video of the problem:

https://github.com/angular/components/assets/15314924/f19fc5e0-f019-474c-b854-85a177b86703

Checking the source code reveals that in the date-adapter.ts file, dates are only compared using year/month/day instead of relying on the native's type when applicable.

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

Lines 243 to 249 in facd027

    
           compareDate(first: D, second: D): number { 
        
             return ( 
        
               this.getYear(first) - this.getYear(second) || 
        
               this.getMonth(first) - this.getMonth(second) || 
        
               this.getDate(first) - this.getDate(second) 
        
             ); 
        
           }

And the method sameDate() is called by MatDatePickerInputBase, and its result is based on the previous method's result:

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

Lines 258 to 268 in facd027

    
           sameDate(first: D | null, second: D | null): boolean { 
        
             if (first && second) { 
        
               let firstValid = this.isValid(first); 
        
               let secondValid = this.isValid(second); 
        
               if (firstValid && secondValid) { 
        
                 return !this.compareDate(first, second); 
        
               } 
        
               return firstValid == secondValid; 
        
             } 
        
             return first == second; 
        
           }

Neither method is overriden in luxon-date-adapter to use something more robust.
Using my own date adapter worked as expected with this snippet:

@Injectable()
export class DemoDateAdapter extends LuxonDateAdapter {
  public override compareDate(first: DateTime<boolean>, second: DateTime<boolean>): number {
    return +first - +second;
  }
}

This fixed the problem for Luxon but for any other adapter not overloading this method (including native dates) the problem arises.

The DateAdapter interface and class does not account for milliseconds (there is no dateAdapter.getMillis), perhaps it should ?

Reproduction

I have a demo app of a lib I'm managing having the problem :
https://thomasprioul.github.io/mdl-angular-libs/#/home/forms
Steps to reproduce:

Use a material app with datepicker inputs and Luxon Date Adapter
Use the following provider (in app or component) to support long date formats

export const DEFAULT_DATEFORMAT_PROVIDER: Provider = {
  provide: MAT_DATE_FORMATS,
  useValue: <MatDateFormats>{
    ...MAT_LUXON_DATE_FORMATS,
    display: {
      ...MAT_LUXON_DATE_FORMATS.display,
      monthLabel: 'LLL yyyy',
      dateInput: ['D', 'D T', 'D TT', 'D TT.SSS', 'D TT.SSSZ'],
    },
    parse: {
      ...MAT_LUXON_DATE_FORMATS.parse,
      dateInput: ['D TT.SSSZ', 'D TT.SSS', 'D TT', 'D T', 'D'],
    },
  },
};

Input a date with a timestamp
CTRL+V another date with same day but different timestamp
Form value does not change and date is reset to previous value when losing focus on the input

Expected Behavior

Correct detection of "different date" on CTRL+V

Actual Behavior

New input is considered as "equal date" when it is not

Environment

Angular: 17.1.1
CDK/Material: 17.1.1
Browser(s): any
Operating System (e.g. Windows, macOS, Ubuntu): any

I believe this is intentional. We only check that the year, month and day match, because the datepicker only selects dates and not dates + times.

It's actually not only about the time that is ignored but everything that is stored in the date instance that adapter provides. For example luxon's DateTime is also keeping track of the outputCalendar and their DateTime.equals is checking that as well.

In my case my initial value for the FormControl bound to the DatePicker is a DateTime with an outputCalendar of null. The DateAdapter<luxon.DateTime> creates DateTime instances with the outputCalendar set to gregory by default. But since compareDate is not taking the "metadata" into account my form is never updated. With the range picker this gets even worse because one of the dates might get updated but not the other potentially resulting in start and end dates with completely different meaning. And from a user perspective this is not clear at all.

Since the DatePicker provides the full type of the DateAdapter and not only something representing year, month, day it should also consult the DateAdapter to perform the comparison.

And the fix for this is straightforward if the custom adapters simply (and optionally) override the compareDate function. I'm more than happy to provide a MR for at least the luxon adapter.

@mpflanzer

Hello @mpflanzer ,

Thank you for the detailed information.

I gave my users the possibility to input seconds, milliseconds or full ISO date strings into my app's date inputs.

I don't think MatDatepicker has any requirement to work with time input or support time at all. I think the recommended solution might be for you to make your own adapter for your specific use case.

I'm going to convert this to discussion. That way this issue doesn't get locked, and you will still be able to post comments.

-Zach

Navigation Menu

Repository navigation

bug(DateAdapter): Date comparison is only checking partial info #28613

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	compareDate(first: D, second: D): number {
	return (
	this.getYear(first) - this.getYear(second) \|\|
	this.getMonth(first) - this.getMonth(second) \|\|
	this.getDate(first) - this.getDate(second)
	);
	}

	sameDate(first: D \| null, second: D \| null): boolean {
	if (first && second) {
	let firstValid = this.isValid(first);
	let secondValid = this.isValid(second);
	if (firstValid && secondValid) {
	return !this.compareDate(first, second);
	}
	return firstValid == secondValid;
	}
	return first == second;
	}

bug(DateAdapter): Date comparison is only checking partial info #28613

Description

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Activity

crisbeto commented on Feb 21, 2024

mpflanzer commented on Mar 14, 2024

zarend commented on Mar 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions