Min / Max too close seems not working

Hello,

I’ve seen a weird behavior. It seems a bug. When I set a minDate and a maxDate too close, the visual picker don’t let met pick the correct hours. Can’t understand why. There is an example :

// example.component.ts
this.minDate = new Date('2021-04-12T17:50');
this.maxDate = new Date('2021-04-12T18:15');

// example.component.html
<mat-form-field>
          <input
            [formControl]="form.get('arrival.date')"
            matInput
            [matDatetimepicker]="arrival"
            required
            [min]="minDate"
            [max]="maxDate"
            [disabled]="form.get('arrival.date').disabled"
            autocomplete="false"
          />
          <mat-datetimepicker-toggle
            [for]="arrival"
            matPrefix
          ></mat-datetimepicker-toggle>
          <mat-datetimepicker
            #arrival
            type="datetime"
            openOnFocus="false"
            timeInterval="1"
          ></mat-datetimepicker>
</mat-form-field>

Whatever the initial value of form.get('arrival.date'), the picker don’t let me pick the 18 hour value (but it looks like clickable). When I click on it, nothing happens.

And if initial value is 2021-04-12T18:15 for example, the picker is preselected on 18 hour, it’s okay, but the value 17 is disabled and not clickable.

If my range min/max is

// example.component.ts
this.minDate = new Date('2021-04-12T17:00'); // <- there is the difference between first example
this.maxDate = new Date('2021-04-12T18:15');

Everything works well.

And if I put this range :

// example.component.ts
this.minDate = new Date('2021-04-12T17:20'); // <- there is the difference between first example
this.maxDate = new Date('2021-04-12T18:15');

The value 17 is disabled, but if you click on it, when can continue on the minutes selection, but all values are disabled …

Some idea ?

Versions of things:

"@angular/animations": "^10.1.0",
"@angular/cdk": "^11.0.2",
"@angular/common": "^10.1.0",
"@angular/compiler": "^10.1.0",
"@angular/core": "^10.1.0",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "^10.1.0",
"@angular/material": "^11.0.2",
"@angular/platform-browser": "^10.1.0",
"@angular/platform-browser-dynamic": "^10.1.0",
"@angular/router": "^10.1.0",
"@mat-datetimepicker/core": "^5.1.2",

PS : I use two custom adapter :

// module.ts
 providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: DatetimeAdapter, useClass: CustomDatetimeAdapter }
],

// custom-date-adapter.ts
import { NativeDateAdapter } from '@angular/material/core';

/** Adapts the native JS Date for use with cdk-based components that work with dates. */
export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    try {
      if (typeof value === 'string' && value.indexOf('.') > -1) {
        const parts = value.split(' ');

        const datePart = parts[0];
        const timePart = parts[1];

        // parse date part
        const str = datePart.split('.');

        const year = Number(str[2]);
        const month = Number(str[1]) - 1;
        const date = Number(str[0]);

        // parse time part
        let hour = 0,
          minute = 0,
          second = 0;
        if (timePart) {
          const time = timePart.split(':');
          hour = Number(time[0]);
          if (time[1]) {
            minute = Number(time[1]);
          }
          if (time[2]) {
            second = Number(time[2]);
          }
        }

        return new Date(year, month, date, hour, minute, second);
      }
      const timestamp = typeof value === 'number' ? value : Date.parse(value);
      return isNaN(timestamp) ? null : new Date(timestamp);
    } catch (err) {
      return null;
    }
  }

  // retirar quando for feito o merge da data por mmalerba
  format(date: Date, displayFormat: Object): string {
    date = new Date(
      Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        date.getMilliseconds()
      )
    );
    displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });

    const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
    return dtf.format(date).replace(/[\u200e\u200f]/g, '');
  }
}

//custom-datetime-adapter.ts
import { NativeDatetimeAdapter } from '@mat-datetimepicker/core';

/** Adapts the native JS Date for use with cdk-based components that work with dates. */
export class CustomDatetimeAdapter extends NativeDatetimeAdapter {

  // retirar quando for feito o merge da data por mmalerba
  format(date: Date, displayFormat: Object): string {
    date = new Date(
      Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        date.getMilliseconds()
      )
    );

    displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });
    const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);

    return dtf.format(date).replace(/[\u200e\u200f]/g, '').replace(',', '');
  }
}

[neogenz]

Thanks ! 👍

[bbortt]

has been merged into master in 2120778 and released in 6.0.3. thank you very much @TorstenL!