feat(time-picker): аdding the disabled style for items which are outside the min/maxValue range #3978 (#7347)

valadzhov · web-flow · commit 6e5d52bdc00e · 2020-07-14T13:44:27.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,8 @@ All notable changes for each version of this project will be documented in this
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
+- `IgxTimePicker`
+    - Added a disabled style for time parts outside of the minimum and maximum range.
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts
@@ -4,6 +4,14 @@ import { InteractionMode } from '../core/enums';
 /** @hidden */
 export const IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken';
 
+/** @hidden */
+export enum TimeParts {
+    Hour = 'hour',
+    Minute = 'minute',
+    Seconds = 'seconds',
+    amPM = 'ampm'
+}
+
 /** @hidden */
 export interface IgxTimePickerBase {
     hourList: ElementRef;
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
@@ -4,7 +4,7 @@
         <igx-prefix (click)="openDialog(group.element.nativeElement)">
             <igx-icon>access_time</igx-icon>
         </igx-prefix>
-        <input 
+        <input
             type="text"
             [igxMask]="mask"
             igxInput
@@ -61,16 +61,24 @@ <h2 class="igx-time-picker__header-hour">
     <div class="igx-time-picker__main">
         <div class="igx-time-picker__body">
             <div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
-                <span [igxHourItem]="hour" *ngFor="let hour of hourView">{{ hour }}</span>
+                <span [igxHourItem]="hour"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
+                *ngFor="let hour of hourView">{{ hour }}</span>
             </div>
             <div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
-                <span [igxMinuteItem]="minute" *ngFor="let minute of minuteView">{{ minute }}</span>
+                <span [igxMinuteItem]="minute"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
+                *ngFor="let minute of minuteView" >{{ minute }}</span>
             </div>
             <div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
-                <span [igxSecondsItem]="seconds" *ngFor="let seconds of secondsView">{{ seconds }}</span>
+                <span [igxSecondsItem]="seconds"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
+                *ngFor="let seconds of secondsView">{{ seconds }}</span>
             </div>
             <div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
-                <span [igxAmPmItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
+                <span [igxAmPmItem]="ampm"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.amPM, ampm)}"
+                *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
         <ng-container
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, NgModule, ElementRef, EventEmitter } from '@angular/core';
+import { Component, ViewChild, NgModule, ElementRef, EventEmitter, DebugElement } from '@angular/core';
 import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -12,6 +12,7 @@ import { InteractionMode } from '../core/enums';
 import { IgxIconModule } from '../icon/public_api';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
+import { IgxHourItemDirective, IgxMinuteItemDirective, IgxSecondsItemDirective, IgxAmPmItemDirective } from './time-picker.directives';
 
 // tslint:disable: no-use-before-declare
 describe('IgxTimePicker', () => {
@@ -1667,6 +1668,53 @@ describe('IgxTimePicker', () => {
             expect(input).not.toEqual(document.activeElement);
             expect(dummyInput).toEqual(document.activeElement);
         }));
+
+        it('should apply disabled style for time outside the min and max values', fakeAsync(() => {
+            timePicker = new IgxTimePickerComponent(null, null);
+            fixture.detectChanges();
+            timePicker.format = 'hh:mm:ss tt';
+            const date = new Date(2018, 10, 27, 9, 50, 58);
+            timePicker.value = date;
+
+            timePicker.minValue = '09:15:10 AM';
+            timePicker.maxValue = '11:15:10 AM';
+
+            timePicker.selectedHour = '06';
+            timePicker.selectedMinute = '25';
+            timePicker.selectedSeconds = '00';
+            timePicker.selectedAmPm = 'AM';
+
+            fixture.detectChanges();
+
+            // The selected time is 06:25:00 AM
+            // Testing 09:25:00 AM
+            expect(timePicker.applyDisabledStyleForItem('hour', '9')).toBe(false);
+
+            timePicker.selectedHour = '9'; // The selected time is 09:25:00 AM
+
+            // Testing 10:25:00 AM
+            expect(timePicker.applyDisabledStyleForItem('hour', '10')).toBe(false);
+
+            timePicker.selectedHour = '10';
+            timePicker.selectedMinute = '10'; // The selected time is 10:10:00 AM
+
+            // Testing 11:10:00 AM
+            expect(timePicker.applyDisabledStyleForItem('hour', '11')).toBe(false);
+
+            timePicker.selectedHour = '11'; // The selected time is 11:10:00 AM
+
+            // Testing 12:11:00 AM
+            expect(timePicker.applyDisabledStyleForItem('hour', '12')).toBe(true);
+            // Testing 11:28:00 AM
+            expect(timePicker.applyDisabledStyleForItem('minute', '28')).toBe(true);
+            // Testing 11:10:28 AM
+            expect(timePicker.applyDisabledStyleForItem('seconds', '28')).toBe(false);
+
+            timePicker.selectedAmPm = 'PM'; // The selected time is 11:10:00 PM
+
+            // Testing 11:10:00 AM
+            expect(timePicker.applyDisabledStyleForItem('ampm', 'AM')).toBe(false);
+        }));
     });
 
     describe('Timepicker with outlet', () => {
@@ -2248,7 +2296,7 @@ export class IgxTimePickerRetemplatedComponent { }
     `
 })
 export class IgxTimePickerDropDownComponent {
-    itemsDelta = { hours: 1, minutes: 5 };
+    itemsDelta = { hours: 1, minutes: 5, seconds: 1 };
     format = 'hh:mm tt';
     isSpinLoop = true;
     isVertical = true;
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -37,7 +37,7 @@ import {
 } from './time-picker.directives';
 import { Subject, fromEvent, interval, animationFrameScheduler, Subscription } from 'rxjs';
 import { EditorProvider } from '../core/edit-provider';
-import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.common';
+import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT, TimeParts } from './time-picker.common';
 import { AbsoluteScrollStrategy } from '../services/overlay/scroll';
 import { AutoPositionStrategy } from '../services/overlay/position';
 import { OverlaySettings } from '../services/overlay/utilities';
@@ -98,6 +98,7 @@ const noop = () => { };
         }`
     ]
 })
+
 export class IgxTimePickerComponent implements
     IgxTimePickerBase,
     ControlValueAccessor,
@@ -152,6 +153,10 @@ export class IgxTimePickerComponent implements
             this.onValidationFailed.emit(args);
         }
     }
+    /**
+     * @hidden @internal
+     */
+    timeParts: any = Object.assign({}, TimeParts);
 
     /**
      * An accessor that returns the value of `igx-time-picker` component.
@@ -507,10 +512,10 @@ export class IgxTimePickerComponent implements
     @ViewChild(IgxInputDirective, { read: ElementRef })
     private _inputElementRef: ElementRef;
 
-    @ViewChild(IgxInputDirective, { read: IgxInputDirective})
+    @ViewChild(IgxInputDirective, { read: IgxInputDirective })
     private _inputDirective: IgxInputDirective;
 
-    @ContentChild(IgxInputDirective, { read: IgxInputDirective})
+    @ContentChild(IgxInputDirective, { read: IgxInputDirective })
     private _inputDirectiveUserTemplate: IgxInputDirective;
 
     @ViewChild(IgxInputGroupComponent, { read: IgxInputGroupComponent })
@@ -635,6 +640,46 @@ export class IgxTimePickerComponent implements
         }
     }
 
+    /** @hidden @internal */
+    applyDisabledStyleForItem(period: string, value: string) {
+        if (!this.minValue || !this.maxValue) {
+            return false;
+        }
+        const minValueDate: Date = this.convertMinMaxValue(this.minValue);
+        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue);
+        let hour: number = parseInt(this.selectedHour, 10);
+        let minute: number = parseInt(this.selectedMinute, 10);
+        let seconds: number = parseInt(this.selectedSeconds, 10);
+        let amPM: string = this.selectedAmPm;
+        const date = new Date(minValueDate);
+        switch (period) {
+            case TimeParts.Hour:
+                hour = parseInt(value, 10);
+                break;
+
+            case TimeParts.Minute:
+                minute = parseInt(value, 10);
+                break;
+
+            case TimeParts.Seconds:
+                seconds = parseInt(value, 10);
+                break;
+
+            case TimeParts.amPM:
+                amPM = value;
+                break;
+        }
+
+        if (amPM === 'PM') {
+            hour += 12;
+        }
+        date.setHours(hour);
+        date.setMinutes(minute);
+        date.setSeconds(seconds);
+        return date < minValueDate || date > maxValueDate;
+
+    }
+
     /** @hidden @internal */
     public registerOnChange(fn: (_: Date) => void) { this._onChangeCallback = fn; }
 
@@ -1267,7 +1312,11 @@ export class IgxTimePickerComponent implements
         return date;
     }
 
-    private _convertMinMaxValue(value: string): Date {
+    /** @hidden @internal */
+    public convertMinMaxValue(value: string): Date {
+        if (!value) {
+            return;
+        }
         const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
         const sections = value.split(/[\s:]+/);
         let hour, minutes, seconds, amPM;
@@ -1310,9 +1359,9 @@ export class IgxTimePickerComponent implements
     }
 
     private _isValueValid(value: Date): boolean {
-        if (this.maxValue && value > this._convertMinMaxValue(this.maxValue)) {
+        if (this.maxValue && value > this.convertMinMaxValue(this.maxValue)) {
             return false;
-        } else if (this.minValue && value < this._convertMinMaxValue(this.minValue)) {
+        } else if (this.minValue && value < this.convertMinMaxValue(this.minValue)) {
             return false;
         } else {
             return true;
@@ -1484,7 +1533,7 @@ export class IgxTimePickerComponent implements
 
     private _onDropDownClosed(): void {
         const oldValue = this.value;
-        const newVal = this._convertMinMaxValue(this.displayValue);
+        const newVal = this.convertMinMaxValue(this.displayValue);
 
         if (this.displayValue === this.parseMask(false)) {
             return;
@@ -1922,7 +1971,7 @@ export class IgxTimePickerComponent implements
         // timepicker own value property if it is a valid Date
         if (val.indexOf(this.promptChar) === -1) {
             if (this._isEntryValid(val)) {
-                const newVal = this._convertMinMaxValue(val);
+                const newVal = this.convertMinMaxValue(val);
                 if (oldVal.getTime() !== newVal.getTime()) {
                     this.value = newVal;
                 }
@@ -1970,7 +2019,7 @@ export class IgxTimePickerComponent implements
 
             if (value && value !== this.parseMask()) {
                 if (this._isEntryValid(value)) {
-                    const newVal = this._convertMinMaxValue(value);
+                    const newVal = this.convertMinMaxValue(value);
                     if (!this.value || this.value.getTime() !== newVal.getTime()) {
                         this.value = newVal;
                     }
@@ -2007,8 +2056,8 @@ export class IgxTimePickerComponent implements
         let sign: number;
         let displayVal: string;
         const currentVal = new Date(this.value);
-        const min = this.minValue ? this._convertMinMaxValue(this.minValue) : this._convertMinMaxValue('00:00');
-        const max = this.maxValue ? this._convertMinMaxValue(this.maxValue) : this._convertMinMaxValue('24:00');
+        const min = this.minValue ? this.convertMinMaxValue(this.minValue) : this.convertMinMaxValue('00:00');
+        const max = this.maxValue ? this.convertMinMaxValue(this.maxValue) : this.convertMinMaxValue('24:00');
 
         const cursor = this._getCursorPosition();
 
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html
@@ -7,7 +7,7 @@
             <h4 class="sample-title">Time Picker with Dropdown</h4>
             <div class="sample-description">{{showDate(date)}}</div>
             <div class="preview" style="width: 280px">
-                <igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15 AM'" [maxValue]="'9:15 PM'"
+                <igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15:20 AM'" [maxValue]="'11:15:20 AM'"
                     (onValidationFailed)="validationFailed($event)" [mode]="mode" [isSpinLoop]="isSpinLoop"
                     [(ngModel)]="date" [itemsDelta]="itemsDelta" [format]="format">
                 </igx-time-picker>
diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts
@@ -11,13 +11,13 @@ export class TimePickerSampleComponent implements AfterViewInit {
     min = '09:00';
 
     itemsDelta = { hours: 1, minutes: 5 };
-    format = 'hh:mm tt';
+    format = 'hh:mm:ss tt';
     isSpinLoop = true;
     isVertical = true;
     mode = InteractionMode.DropDown;
 
     date1 = new Date(2018, 10, 27, 17, 45, 0, 0);
-    date = new Date(2018, 10, 27, 21, 45, 0, 0);
+    date = new Date(2018, 10, 27, 9, 45, 0, 0);
     val = new Date(0, 0, 0, 19, 35, 30, 0);
     today = new Date(Date.now());
 
