Skip to content
Permalink
Browse files

fix(module:date-picker): sort range picker value when start is after …

…end (#3956)

* fix(module:date-picker): sort range picker value when start is after end

* fix: test

close #3940, close #1642
  • Loading branch information...
wenqi73 authored and vthinkxie committed Aug 13, 2019
1 parent 5880345 commit 117b453d795cd2fb3d945768fe0cccdeabf3b292
@@ -15,7 +15,7 @@ import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd';
<br />
<nz-year-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select year"></nz-year-picker>
<br />
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"></nz-range-picker>
<br />
<nz-week-picker [(ngModel)]="date" (ngModelChange)="getWeek($event)" nzPlaceHolder="Select week"></nz-week-picker>
<br />
@@ -146,7 +146,7 @@ describe('Coverage supplements', () => {

// sortRangeValue
componentInstance.selectedValue = [end, start];
componentInstance.sortRangeValue('selectedValue');
componentInstance.sortRangeValue();
expect(componentInstance.selectedValue[0].getDate()).toBe(11);
});
}); // /DateRangePopup
@@ -177,6 +177,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
const index = this.getPartTypeIndex(partType);
this.selectedValue[index] = value;
if (this.isValidRange(this.selectedValue)) {
this.sortRangeValue();
this.valueForRangeShow = this.normalizeRangeValue(this.selectedValue);
this.setValue(this.cloneRangeDate(this.selectedValue));
}
@@ -196,8 +197,8 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
} else if (left && !right) {
// If one of them is empty, assign the other one and sort, then set the final values
this.clearHoverValue(); // Clean up
this.setRangeValue('selectedValue', 'right', value);
this.sortRangeValue('selectedValue'); // Sort
this.setRangeValue('right', value);
this.sortRangeValue(); // Sort
this.valueForRangeShow = this.normalizeRangeValue(this.selectedValue);
this.setValue(this.cloneRangeDate(this.selectedValue));
this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
@@ -400,8 +401,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
private isValidRange(value: CandyDate[]): boolean {
if (Array.isArray(value)) {
const [start, end] = value;
const grain = this.hasTimePicker ? 'second' : 'day';
return start && end && (start.compare(end, grain) || start.isSame(end, grain));
return !!(start && end);
}
return false;
}
@@ -418,18 +418,18 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
// }

// Sort a range value (accurate to second)
private sortRangeValue(key: 'selectedValue'): void {
if (Array.isArray(this[key])) {
const [start, end] = this[key];
if (start && end && start.isAfterDay(end)) {
this[key] = [end, start];
private sortRangeValue(): void {
if (Array.isArray(this.selectedValue)) {
const [start, end] = this.selectedValue;
if (start && end && start.isAfterSecond(end)) {
this.selectedValue = [end, start];
}
}
}

// Renew and set a range value to trigger sub-component's change detection
private setRangeValue(key: 'value' | 'selectedValue', partType: RangePartType, value: CandyDate): void {
const ref = (this[key] = this.cloneRangeDate(this[key] as CandyDate[]));
private setRangeValue(partType: RangePartType, value: CandyDate): void {
const ref = (this.selectedValue = this.cloneRangeDate(this.selectedValue as CandyDate[]));
ref[this.getPartTypeIndex(partType)] = value;
}

@@ -687,6 +687,24 @@ describe('NzRangePickerComponent', () => {
expect(result[0].getDate()).toBe(11);
expect(result[1].getDate()).toBe(12);
}));

it('should auto sort range value when start is after end', fakeAsync(() => {
const nzOnChange = spyOn(fixtureInstance, 'modelValueChange');
fixture.detectChanges();
openPickerByClickTrigger();
const leftInput = queryFromOverlay('.ant-calendar-range-left input.ant-calendar-input') as HTMLInputElement;
const rightInput = queryFromOverlay('.ant-calendar-range-right input.ant-calendar-input') as HTMLInputElement;
leftInput.value = '2019-08-10';
leftInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
fixture.detectChanges();
rightInput.value = '2018-02-06';
rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
fixture.detectChanges();
tick(500);
const result = nzOnChange.calls.allArgs()[0][0];
expect(result[0].getDate()).toBe(6);
expect(result[1].getDate()).toBe(10);
}));
}); // /specified date picker testing

describe('ngModel value accesors', () => {

0 comments on commit 117b453

Please sign in to comment.
You can’t perform that action at this time.