nz-range-picker 默認展示當前月和上個月，不可選用日期為今日之后和180天之前。

第一次寫隨筆也不知道寫什么好，就記錄一下自己怎么簡單使用nz-range-picker的吧，希望大佬們多多指點。

• 首先實現不可選用日期，按照官方文檔在我的.ts文件中引入differenceInCalendarDays方法，但是有報錯。

之后，我是這樣引入方法的：

 

其問題出在哪里還不是很明白，因為之前都是使用vue，angular用的還不是很久。希望有知道的大佬指點一下。

下面是nz-range-picker代碼：

<nz-range-picker (ngModelChange)="onChangeRange($event)"
          [nzDisabledDate]="disabledDate" [nzPlaceHolder]="['請選擇起始時間', '請選擇結束時間']" [(ngModel)]="rangeDate"  [nzRanges]="ranges"
          (nzOnOpenChange)="handleStartOpenChange($event)">
          </nz-range-picker>

下面限制日期選擇范圍：

 disabledDate = (current: Date): boolean => {
    // 不能選擇當前日期之后以及180天前的日期
    return differenceInCalendarDays(current, new Date()) < -180 || differenceInCalendarDays(current, new Date()) > 0;
  };

• 之后點開日期面板發現顯示的是當前月和下個月的日期，這樣使用起來就很不方便，預期實現顯示上個月和當前月的日期。於是參考了 https://blog.csdn.net/qq_40637612/article/details/107248023 這位博主，但是我實現之后使用發現第一次點擊選擇日期之后，清除掉選擇日期之后再打開就還是會出現顯示未達到預期的樣子。改進了一下判斷邏輯后，實現如下：

 handleStartOpenChange(e: any): void {
    // isFirst用於判斷是否第一次打開日期面板
    if (e && this.isFirst === true) {
      setTimeout(() => {
        const pre: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
        pre[0].click();
      }, 0);
      setTimeout(() => { // 這一段一定要注意，不然會是第一個上翻a標簽觸發兩次。
        const next: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
        if (next[1]) {
          next[1].click();
        }
      }, 10);
    }
  }

 

 onChangeRange(result: Date[]): void {
    this.isFirst = false;
    // 如果是清除了之前選擇的時間，改變判斷邏輯
    if (!result.length) {
      this.isFirst = true;
    }
  }