Merge pull request #11655 from sbarlabanov/fix-month-range-selection

Fixed #11153: month range selection in calendar
primefaces · Sep 26, 2022 · 6f89448 · 6f89448
2 parents 2ade625 + 2cf1a34
commit 6f89448
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 7 deletions.
diff --git a/src/app/components/calendar/calendar.spec.ts b/src/app/components/calendar/calendar.spec.ts
@@ -1591,7 +1591,73 @@ describe('Calendar', () => {
 		expect(calendar.value.length).toEqual(2);
 	});
 
-	it('should select range (touchUI third times)', () => {
+    it('should highlight selected range in month view', () => {
+        const date = new Date(2017, 2, 12);
+        calendar.defaultDate = date;
+        jasmine.clock().mockDate(date);
+        calendar.selectionMode = "range";
+        calendar.view = "month";
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+        const focusEvent = new Event('focus');
+        inputEl.click();
+        inputEl.dispatchEvent(focusEvent);
+        fixture.detectChanges();
+
+        const containerEl = fixture.debugElement.query(By.css('.p-monthpicker'));
+
+        const firstMonthEl = containerEl.queryAll(By.css('span.p-monthpicker-month:not(.p-disabled)'))[0].nativeElement;
+        const secondMonthEl = containerEl.queryAll(By.css('span.p-monthpicker-month:not(.p-disabled)'))[1].nativeElement;
+        const thirdMonthEl = containerEl.queryAll(By.css('span.p-monthpicker-month:not(.p-disabled)'))[2].nativeElement;
+
+        firstMonthEl.click();
+        fixture.detectChanges();
+
+        thirdMonthEl.click();
+        fixture.detectChanges();
+
+        expect(calendar.overlayVisible).toEqual(true);
+        expect(calendar.value.length).toEqual(2);
+
+        expect(firstMonthEl.classList).toContain('p-highlight')
+        expect(secondMonthEl.classList).toContain('p-highlight')
+        expect(thirdMonthEl.classList).toContain('p-highlight')
+    });
+
+    it('should show disabled months in month range selection mode', () => {
+        const date = new Date(2017, 2, 12);
+        calendar.defaultDate = date;
+        jasmine.clock().mockDate(date);
+        calendar.selectionMode = "range";
+        calendar.view = "month";
+        calendar.maxDate = new Date(date.getFullYear(), 6, 1)
+        calendar.minDate = new Date(date.getFullYear(), 3, 1)
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+        const focusEvent = new Event('focus');
+        inputEl.click();
+        inputEl.dispatchEvent(focusEvent);
+        fixture.detectChanges();
+
+        const containerEl = fixture.debugElement.query(By.css('.p-monthpicker'));
+
+        const monthEl = (m: number) =>
+            containerEl.queryAll(By.css('span.p-monthpicker-month'))[m].nativeElement;
+
+        [0, 1, 2, 7, 8, 9, 10, 11].forEach(m => {
+            expect(monthEl(m).classList).withContext(`${m} month must be disabled`)
+                .toContain('p-disabled')
+        });
+
+        [3, 4, 5, 6].forEach(m => {
+            expect(monthEl(m).classList).withContext(`${m} month must be enabled`)
+                .not.toContain('p-disabled')
+        })
+    });
+
+    it('should select range (touchUI third times)', () => {
 		const date = new Date(2017, 2, 12);
 		calendar.defaultDate = date;
 		jasmine.clock().mockDate(date);

diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -108,7 +108,7 @@ export type CalendarTypeView = 'date' | 'month' | 'year';
                         </div>
                     </div>
                     <div class="p-monthpicker" *ngIf="currentView === 'month'">
-                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i)}" pRipple>
+                        <span *ngFor="let m of monthPickerValues(); let i = index" (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event,i)" class="p-monthpicker-month" [ngClass]="{'p-highlight': isMonthSelected(i), 'p-disabled': isMonthDisabled(i)}" pRipple>
                             {{m}}
                         </span>
                     </div>
@@ -1240,15 +1240,18 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
     }
 
     isMonthSelected(month) {
-        if (this.isComparable()) {
-            let value = this.isRangeSelection() ? this.value[0] : this.value;
-
-            return !this.isMultipleSelection() ? (value.getMonth() === month && value.getFullYear() === this.currentYear) : false;
+        if (this.isComparable() && !this.isMultipleSelection()) {
+            const [start, end] = this.isRangeSelection() ? this.value : [this.value, this.value];
+            const selected  = new Date(this.currentYear, month, 1)
+            return selected >= start && selected <= (end ?? start);
         }
-
         return false;
     }
 
+    isMonthDisabled(month) {
+        return !this.isSelectable(1, month, this.currentYear, false)
+    }
+
     isYearSelected(year) {
         if (this.isComparable()) {
             let value = this.isRangeSelection() ? this.value[0] : this.value;