fix(module:date-picker): start and end month displays unreasonable

fix(module:date-picker,timepicker): trackBy function close NG-ZORRO#6308 close NG-ZORRO#6142 close NG-ZORRO#5992
wenqi73 · Jan 13, 2021 · 86f6731 · 86f6731
1 parent 4711194
commit 86f6731
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 75 deletions.
diff --git a/components/core/time/candy-date.spec.ts b/components/core/time/candy-date.spec.ts
@@ -51,13 +51,25 @@ describe('candy-date coverage supplements', () => {
     expect(result[0]!.getMonth()).toEqual(8);
     expect(result[1]!.getMonth()).toEqual(9);
 
+    result = normalizeRangeValue([randomDay, null], true);
+    expect(result[0]!.getMonth()).toEqual(8);
+    expect(result[1]!.getMonth()).toEqual(8);
+
     result = normalizeRangeValue([null, null], false);
     expect(result[0]!.getMonth()).toEqual(now.getMonth());
     expect(differenceInCalendarMonths(result[1]!.nativeDate, now)).toEqual(1);
 
-    result = normalizeRangeValue([new CandyDate(), new CandyDate()], false);
+    result = normalizeRangeValue([null, null], true);
     expect(result[0]!.getMonth()).toEqual(now.getMonth());
-    expect(differenceInCalendarMonths(result[1]!.nativeDate, now)).toEqual(1);
+    expect(result[1]!.getMonth()).toEqual(now.getMonth());
+
+    result = normalizeRangeValue([randomDay, new CandyDate()], false, 'month', 'left');
+    expect(result[0]!.getMonth()).toEqual(randomDay.getMonth());
+    expect(differenceInCalendarMonths(result[1]!.nativeDate, randomDay.nativeDate)).toEqual(1);
+
+    result = normalizeRangeValue([randomDay, new CandyDate()], false, 'month', 'right');
+    expect(result[1]!.getMonth()).toEqual(now.getMonth());
+    expect(differenceInCalendarMonths(result[0]!.nativeDate, now)).toEqual(-1);
 
     result = normalizeRangeValue([new CandyDate(), new CandyDate()], true);
     expect(result[0]!.getMonth()).toEqual(now.getMonth());

diff --git a/components/core/time/candy-date.ts b/components/core/time/candy-date.ts
@@ -41,19 +41,28 @@ export function wrongSortOrder(rangeValue: SingleValue[]): boolean {
   return !!start && !!end && end.isBeforeDay(start);
 }
 
-export function normalizeRangeValue(value: SingleValue[], allowSameInTwoPanel: boolean, type: NormalizedMode = 'month'): CandyDate[] {
+export function normalizeRangeValue(
+  value: SingleValue[],
+  hasTimePicker: boolean,
+  type: NormalizedMode = 'month',
+  activePart: 'left' | 'right' = 'left'
+): CandyDate[] {
   const [start, end] = value;
   let newStart: CandyDate = start || new CandyDate();
-  let newEnd: CandyDate = end || new CandyDate();
+  let newEnd: CandyDate = end || (hasTimePicker ? newStart : newStart.add(1, type));
+
   if (start && !end) {
     newStart = start;
-    newEnd = start.add(1, type);
+    newEnd = hasTimePicker ? start : start.add(1, type);
   } else if (!start && end) {
-    newStart = end.add(-1, type);
+    newStart = hasTimePicker ? end : end.add(-1, type);
     newEnd = end;
-  }
-  if (newEnd.isSame(newStart, type) && !allowSameInTwoPanel) {
-    newEnd = newStart.add(1, type);
+  } else if (start && end && !hasTimePicker) {
+    if (activePart === 'left') {
+      newEnd = newStart.add(1, type);
+    } else {
+      newStart = newEnd.add(-1, type);
+    }
   }
   return [newStart, newEnd];
 }

diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
@@ -92,22 +92,23 @@ export class CalendarFooterComponent implements OnChanges {
   isNonEmptyString = isNonEmptyString;
   isTodayDisabled: boolean = false;
   todayTitle: string = '';
-  private now: CandyDate = new CandyDate();
 
   constructor(private dateHelper: DateHelperService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
+    const now: Date = new Date();
     if (changes.disabledDate) {
-      this.isTodayDisabled = !!(this.disabledDate && this.disabledDate(this.now.nativeDate));
+      this.isTodayDisabled = !!(this.disabledDate && this.disabledDate(now));
     }
     if (changes.locale) {
       // NOTE: Compat for DatePipe formatting rules
       const dateFormat: string = transCompatFormat(this.locale.dateFormat);
-      this.todayTitle = this.dateHelper.format(this.now.nativeDate, dateFormat);
+      this.todayTitle = this.dateHelper.format(now, dateFormat);
     }
   }
 
   onClickToday(): void {
-    this.clickToday.emit(this.now.clone()); // To prevent the "now" being modified from outside, we use clone
+    const now: CandyDate = new CandyDate();
+    this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone
   }
 }
diff --git a/components/date-picker/date-picker.service.ts b/components/date-picker/date-picker.service.ts
@@ -23,11 +23,11 @@ export class DatePickerService implements OnDestroy {
 
   initValue(): void {
     if (this.isRange) {
-      this.setActiveDate([]);
-      this.value = this.initialValue = [];
+      this.initialValue = [];
     } else {
-      this.value = this.initialValue = null;
+      this.initialValue = null;
     }
+    this.setValue(this.initialValue);
   }
 
   hasValue(value: CompatibleValue = this.value): boolean {
@@ -46,14 +46,14 @@ export class DatePickerService implements OnDestroy {
     }
   }
 
-  setActiveDate(value: CompatibleValue, allowSameInTwoPanel: boolean = false, mode: NormalizedMode = 'month'): void {
+  setActiveDate(value: CompatibleValue, hasTimePicker: boolean = false, mode: NormalizedMode = 'month'): void {
     const parentPanels: { [key in NzDateMode]?: NormalizedMode } = {
       date: 'month',
       month: 'year',
       year: 'decade'
     };
     if (this.isRange) {
-      this.activeDate = normalizeRangeValue(value as CandyDate[], allowSameInTwoPanel, parentPanels[mode]);
+      this.activeDate = normalizeRangeValue(value as CandyDate[], hasTimePicker, parentPanels[mode], this.activeInput);
     } else {
       this.activeDate = cloneDate(value);
     }

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -49,8 +49,8 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
         <div class="{{ prefixCls }}-range-arrow" [style.left.px]="datePickerService?.arrowLeft"></div>
         <div class="{{ prefixCls }}-panel-container">
           <div class="{{ prefixCls }}-panels">
-            <ng-container *ngTemplateOutlet="tplRangePart; context: { partType: 'left' }"></ng-container>
-            <ng-container *ngTemplateOutlet="tplRangePart; context: { partType: 'right' }"></ng-container>
+            <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'left' }"></ng-container>
+            <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'right' }"></ng-container>
           </div>
           <ng-container *ngTemplateOutlet="tplFooter"></ng-container>
         </div>
@@ -71,28 +71,29 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
     </ng-template>
 
     <ng-template #tplInnerPopup let-partType="partType">
-      <!-- TODO(@wenqi73) [selectedValue] [hoverValue] types-->
-      <inner-popup
-        *ngIf="show(partType)"
-        [showWeek]="showWeek"
-        [endPanelMode]="getPanelMode(endPanelMode, partType)"
-        [partType]="partType"
-        [locale]="locale!"
-        [showTimePicker]="hasTimePicker"
-        [timeOptions]="getTimeOptions(partType)"
-        [panelMode]="getPanelMode(panelMode, partType)"
-        (panelModeChange)="onPanelModeChange($event, partType)"
-        [activeDate]="getActiveDate(partType)"
-        [value]="getValue(partType)"
-        [disabledDate]="disabledDate"
-        [dateRender]="dateRender"
-        [selectedValue]="$any(datePickerService?.value)"
-        [hoverValue]="$any(hoverValue)"
-        (cellHover)="onCellHover($event)"
-        (selectDate)="changeValueFromSelect($event, !showTime)"
-        (selectTime)="onSelectTime($event, partType)"
-        (headerChange)="onActiveDateChange($event, partType)"
-      ></inner-popup>
+      <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'" [style.display]="show(partType) ? 'block' : 'none'">
+        <!-- TODO(@wenqi73) [selectedValue] [hoverValue] types-->
+        <inner-popup
+          [showWeek]="showWeek"
+          [endPanelMode]="getPanelMode(endPanelMode, partType)"
+          [partType]="partType"
+          [locale]="locale!"
+          [showTimePicker]="hasTimePicker"
+          [timeOptions]="getTimeOptions(partType)"
+          [panelMode]="getPanelMode(panelMode, partType)"
+          (panelModeChange)="onPanelModeChange($event, partType)"
+          [activeDate]="getActiveDate(partType)"
+          [value]="getValue(partType)"
+          [disabledDate]="disabledDate"
+          [dateRender]="dateRender"
+          [selectedValue]="$any(datePickerService?.value)"
+          [hoverValue]="$any(hoverValue)"
+          (cellHover)="onCellHover($event)"
+          (selectDate)="changeValueFromSelect($event, !showTime)"
+          (selectTime)="onSelectTime($event, partType)"
+          (headerChange)="onActiveDateChange($event, partType)"
+        ></inner-popup>
+      </div>
     </ng-template>
 
     <ng-template #tplFooter>
@@ -111,12 +112,6 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
       ></calendar-footer>
     </ng-template>
 
-    <ng-template #tplRangePart let-partType="partType">
-      <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'">
-        <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: partType }"></ng-container>
-      </div>
-    </ng-template>
-
     <!-- Range ONLY: Range Quick Selector -->
     <ng-template #tplRangeQuickSelector>
       <li

diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md
@@ -18,7 +18,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 ## API
 
-**注意：**nz-date-picker 的部分 locale 来自于 Angular 自身的[国际化支持](https://angular.io/guide/i18n)，需要在 `app.module.ts` 文件中 引入相应的 Angular 语言包。
+**注意：** nz-date-picker 的部分 locale 来自于 Angular 自身的[国际化支持](https://angular.io/guide/i18n)，需要在 `app.module.ts` 文件中 引入相应的 Angular 语言包。
 例如：
 ```typescript
 import { registerLocaleData } from '@angular/common';

diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts
@@ -69,7 +69,7 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
       const row: DateBodyRow = {
         isActive: false,
         dateCells: [],
-        trackByIndex: `${weekStart.getYear()}`
+        trackByIndex: week
       };
 
       for (let day = 0; day < 7; day++) {
@@ -78,7 +78,7 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
         const title = this.dateHelper.format(date.nativeDate, dateFormat);
         const label = this.dateHelper.format(date.nativeDate, 'dd');
         const cell: DateCell = {
-          trackByIndex: title,
+          trackByIndex: day,
           value: date.nativeDate,
           label: label,
           isSelected: false,

diff --git a/components/date-picker/lib/decade-table.component.ts b/components/date-picker/lib/decade-table.component.ts
@@ -42,7 +42,7 @@ export class DecadeTableComponent extends AbstractTable implements OnChanges {
     for (let rowIndex = 0; rowIndex < MAX_ROW; rowIndex++) {
       const row: DateBodyRow = {
         dateCells: [],
-        trackByIndex: previousYear
+        trackByIndex: rowIndex
       };
 
       for (let colIndex = 0; colIndex < MAX_COL; colIndex++) {
@@ -51,7 +51,7 @@ export class DecadeTableComponent extends AbstractTable implements OnChanges {
         const content = `${start}-${end}`;
 
         const cell: DecadeCell = {
-          trackByIndex: content,
+          trackByIndex: colIndex,
           value: this.activeDate.setYear(start).nativeDate,
           content,
           title: content,

diff --git a/components/date-picker/lib/month-table.component.ts b/components/date-picker/lib/month-table.component.ts
@@ -37,15 +37,15 @@ export class MonthTableComponent extends AbstractTable implements OnChanges, OnI
     for (let rowIndex = 0; rowIndex < this.MAX_ROW; rowIndex++) {
       const row: DateBodyRow = {
         dateCells: [],
-        trackByIndex: this.activeDate.getYear()
+        trackByIndex: rowIndex
       };
 
       for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
         const month = this.activeDate.setMonth(monthValue);
         const isDisabled = this.isDisabledMonth(month);
         const content = this.dateHelper.format(month.nativeDate, 'MMM');
         const cell: DateCell = {
-          trackByIndex: content,
+          trackByIndex: colIndex,
           value: month.nativeDate,
           isDisabled,
           isSelected: month.isSameMonth(this.value),

diff --git a/components/date-picker/lib/year-table.component.ts b/components/date-picker/lib/year-table.component.ts
@@ -41,15 +41,15 @@ export class YearTableComponent extends AbstractTable {
     for (let rowIndex = 0; rowIndex < this.MAX_ROW; rowIndex++) {
       const row: DateBodyRow = {
         dateCells: [],
-        trackByIndex: startYear
+        trackByIndex: rowIndex
       };
       for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
         const yearNum = previousYear + yearValue;
         const year = this.activeDate.setYear(yearNum);
         const content = this.dateHelper.format(year.nativeDate, 'yyyy');
         const isDisabled = this.isDisabledYear(year);
         const cell: YearCell = {
-          trackByIndex: content,
+          trackByIndex: colIndex,
           value: year.nativeDate,
           isDisabled,
           isSameDecade: yearNum >= startYear && yearNum <= endYear,

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -270,6 +270,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
       }
       this.focus();
       this.updateInputWidthAndArrowLeft();
+      this.panel?.updateActiveDate();
     });
   }
-Original file line number
+Diff line change
@@ Expand Up @@
           }
           this.focus();
           this.updateInputWidthAndArrowLeft();
+          this.panel?.updateActiveDate();
         });
       }
@@ Expand Down @@