防止 mat-datepicker 在日期选择时关闭

Question

我有一个要求，用户可以在 datepicker 中选择多个日期，但是在每次选择日期后 mat-datepicker 关闭，我想防止 mat-datepicker 在日期选择时关闭并在我们在 datepicker 外部或日历图标上单击时关闭 datepicker .

我尝试在 mat-datepicker 上closed事件，但日期选择器在每个日期选择上都在闪烁，而且当我们在日期选择器外单击时它不会关闭。

这是我尝试过的：

html代码：

<input formControlName="fromDate" matInput [matDatepicker]="fromDatePicker" placeholder="From Date" [min]="minDate" readonly>
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
<mat-datepicker #fromDatePicker (closed)="_openCalendar(fromDatePicker)"></mat-datepicker>

打字稿代码：

_openCalendar(picker: MatDatepicker<Date>) {
    picker.open();
}

Answer 1

我阻止覆盖关闭的方法是更改MatCalendar._userSelected方法。

如果您查看 MatDatePickerContent 的模板，您会注意到何时发出 _userSelection的调用。 调用是关闭覆盖： (_userSelection)="datepicker.close()" 。 现在， _userSelection在MatCalendar._userSelected中发出。

datepicker.js，第 1687 行，“@angular/material”：“8.2.3”：

_userSelected() {
    this._userSelection.emit();
}

因为我不希望应用程序中的所有 DatePicker 实例都有这种行为，所以在我的组件中我做了如下操作：

@ViewChild('picker', { static: true }) 
private picker: MatDatepicker<Date>;
private preventCloseOnSelection = true;
private readonly initCalendarUserSelected: () => void;
public model: Array<Date>;

constructor(private readonly cdr: ChangeDetectorRef) {
    this.initCalendarUserSelected = MatCalendar.prototype._userSelected;
}

public ngAfterViewInit() {
    this.picker.calendarHeaderComponent = CalendarTimeHeaderComponent;

    this.picker.openedStream
        .pipe(takeUntil(this.isUnsubscribing))
        .subscribe(() => {

            if (this.preventCloseOnSelection) {
                MatCalendar.prototype._userSelected = () => {};
            } else {
                MatCalendar.prototype._userSelected = this.initCalendarUserSelected;
            }

            this.cdr.detectChanges();
        });
}

public ngOnDestroy() {
    MatCalendar.prototype._userSelected = this.initCalendarUserSelected;
}

如果你想这种行为为所有的日期选择器的情况下，可以覆盖在AppComponent的MatCalendar._userSelected方法的地方，并没有刻意去恢复它。

另一种方法是执行this.picker.close = () => { }; 日期更改后，但您必须始终恢复它才能关闭覆盖。

你可以选择的日期与matDatepickerInput的dateChange事件，并创建一个日期多个值的数组，并为他们在视图中选择有，你可以使用matDatepicker的dateClass输入。

看法：

<input [(ngModel)]="model" matInput [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="dateChanged($event)" />
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [dateClass]="dateClass"></mat-datepicker>

方法：

public dateClass = (date: Date) => {
    if (this.model.map((m) => +m).indexOf(+date) !== -1) {
        return [ 'selected' ];
    }
    return [ ];
}

public dateChanged(event: MatDatepickerInputEvent<Date>) {
    if (event.value) {
        const date = event.value;
        const index = this.model.map((m) => +m).indexOf(+date);
        if (index === -1) {
            this.model.push(date);
        } else {
            this.model.splice(index, 1)
        }
    }
}

Answer 2

在日期范围选择器的情况下，我解决了这个问题，如下所示：

export class MatDatetimeComponent {
  @ViewChild(MatDateRangePicker) containerElRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private cdr: ChangeDetectorRef,
    private cdkConnectedOverlay: OverlayOutsideClickDispatcher
  ) {}

  // store prototype close object
  private selfClose: () => void;

  ngAfterViewInit() { 
    this.selfClose = this.containerElRef.close;
  }
  public onOpen() { 
    // rewrite autoclose after date is chosen
    this.containerElRef.close = () => {};

    // close calendar manually on outside click
    this.cdkConnectedOverlay._attachedOverlays[0]._outsidePointerEvents.subscribe(() => {
        // restore saved close method
        this.containerElRef.close = this.selfClose;
        this.containerElRef.close();
    });
  }
}

Answer 3

因为其他解决方案对我不起作用，所以我这样做了：

打字稿代码：

  @ViewChild(MatDatepicker) datePicker: MatDatepicker<Date>;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private cdkConnectedOverlay: OverlayOutsideClickDispatcher) { }

  // store prototype close object
  private selfClose: () => void;

  opened() {
    if (isNullOrUndefined(this.selfClose)) {
      this.selfClose = this.datePicker.close;
    }

    // rewrite autoclose after date is chosen
    this.datePicker.close = () => {};

    // close calendar manually on outside click
    this.cdkConnectedOverlay._attachedOverlays[0]._outsidePointerEvents.subscribe(() => {
      // restore saved close method
      this.datePicker.close = this.selfClose;
      this.selfClose = undefined;
      this.datePicker.close();
    });
  }

架构代码：

  <mat-datepicker #picker
                  (opened)="opened()"
  ></mat-datepicker>

也许这可以帮助那里的人。