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>

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

防止日期选择器在选择日期时关闭

3 个答案: