Datepicker - Cannot select dates

[Krenom]

Good morning,

Apologies in advance, no reproduction available - probably not possible. This is more of an investigation enquiry as I can't find the cause of the issue.

Recently updated an old project from 8 to 11, and seems the only thing along the way left causing any issue is the date picker.

Date picker seems to be working fine initially - opens in touchUi form and can navigate months:

<mat-form-field fxFlexFill>
  <input matInput 
    [value]="value"
    [min]="minDate"
    [max]="maxDate"
    [matDatepicker]="picker"
    [placeholder]="placeholder"
    (dateChange)="onDateChange($event.value)"
    (click)="picker.open()"
    [matDatepickerFilter]="filter"
    [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

However, I can't click on any of the actual dates (or the years if I open that). Well, I can click on them, but it doesn't do anything (in neither Chrome nor FF).

The td elements do have the event listeners attached to them, and a click event is firing and being picked up, but.... nothing happens.

Hits into here...

... But I have no experience with Angular under the hood and following through all of that to make it efficient to attempt such.

Any thoughts on what may be causing this behaviour that I can fix? I doubt it's an issue with material itself in some way (might be, I guess), so what could I possibly have done in this mammoth update process to have killed off date picker clicking, of all things?

My packages:

  "dependencies": {
    "@angular/animations": "11.0.2",
    "@angular/cdk": "11.0.0",
    "@angular/common": "11.0.2",
    "@angular/compiler": "11.0.2",
    "@angular/core": "11.0.2",
    "@angular/flex-layout": "11.0.0-beta.33",
    "@angular/forms": "11.0.2",
    "@angular/material": "11.0.0",
    "@angular/platform-browser": "11.0.2",
    "@angular/platform-browser-dynamic": "11.0.2",
    "@angular/router": "11.0.2",
    "buffer": "5.6.0",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.5",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "moment": "2.29.0",
    "rxjs": "6.6.3",
    "tslib": "2.0.3",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1100.2",
    "@angular/cli": "11.0.2",
    "@angular/compiler-cli": "11.0.2",
    "@angular/language-service": "11.0.2",
    "@types/jasmine": "3.6.0",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.11.1",
    "codelyzer": "6.0.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "5.0.2",
    "karma": "5.1.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-coverage-istanbul-reporter": "3.0.2",
    "karma-edge-launcher": "0.4.2",
    "karma-firefox-launcher": "1.1.0",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "karma-junit-reporter": "1.2.0",
    "karma-phantomjs-launcher": "1.0.4",
    "phantomjs-prebuilt": "2.1.16",
    "protractor": "7.0.0",
    "ts-node": "7.0.1",
    "tslint": "6.1.0",
    "typescript": "4.0.3"
  }

Edit: It works on other pages, but not this one. Either the one directly on the page or the one in the dialog (mat dialog) launched from that page...

[Krenom]

Ah, found it - something to do with the filter. Only thing different between the usages on that page vs the others. Take out the filter and can click things again.

[Krenom]

Ok, premature closing because I can't figure out why the filter isn't working.

The filters are working, but won't let me click any dates (i.e. as per described issue).

my picker component:

<mat-form-field fxFlexFill>
  <input matInput 
    [value]="value"
    [min]="minDate"
    [max]="maxDate"
    [matDatepicker]="picker"
    [placeholder]="placeholder"
    (dateChange)="onDateChange($event.value)"
    (click)="picker.open()"
    [matDatepickerFilter]="filter"
    [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'date-picker-component',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {

  @Input() public disabled: boolean;
  @Input() public placeholder: string;
  @Input() public value: Date;
  @Input() public minDate: Date;
  @Input() public maxDate: Date;
  @Input() public filter: (dt: Date) => boolean;
  @Output() public onSelect = new EventEmitter<Date>();

  public onDateChange(date: Date): void {
    this.onSelect.emit(date);
  }
}

Usage:

<date-picker-component
      [filter]="fromDateFilter()"
      [minDate]="details.startUtc"
      placeholder="From"
      (onSelect)="exclusionModel.fromDateUtc = $event">
</date-picker-component>

and the filter:

public fromDateFilter(): (dt: Date) => boolean {
    const fn = (dt: Date): boolean => {
      return dt >= DateExtensions.addDays(new Date(), -1)
          && DateExtensions.toStringFormat(dt, 'dddd') === this.day;
    };

    return fn;
}

Visuals of filter working (Mondays only available):

What is wrong with my filter setup such that I can't select any dates?

[crisbeto]

It seems like most dates in that screenshot are disabled, either because they don't match the filter, or they're before the min or after the max dates. Could that be the reason why you can't click them?

[Krenom]

@crisbeto Yes, per the filter only Mondays that are >= today are available to select. So the filtering of the dates itself seems to be working, but those it has left available for selection do nothing when clicked. E.g. 23rd and 30th in the screenshot.

[BUONJG]

@Krenom I had the exact same issue. You should probably define your filter function in your component instead of calling a function returning the filter function. This way, it fixed the issue on my side:

public fromDateFilter = (dt: Date): boolean => {
return dt >= DateExtensions.addDays(new Date(), -1)
&& DateExtensions.toStringFormat(dt, 'dddd') === this.day;
}

The way you did it was working for me on previous angular/angular material version but not anymore on version 10

[Krenom]

@BUONJG You glorious person you. That has done the trick nicely, thank you very much!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}