feat(time-picker): support fractional seconds for input

Author: ddaribo

projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

@@ -12,7 +12,7 @@ export interface IgxTimePickerBase {
     secondsList: ElementRef;
     ampmList: ElementRef;
     inputFormat: string;
-    itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>;
+    itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'>;
 	spinLoop: boolean;
     selectedDate: Date;
     maxDropdownValue: Date;

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -740,10 +740,11 @@ describe('IgxTimePicker', () => {
             }));
 
             it('should change date parts correctly and emit valueChange with increment() and decrement() methods', () => {
-                const date = new Date(2020, 12, 12, 10, 30, 30);
+                const date = new Date(2020, 12, 12, 10, 30, 30, 999);
+                timePicker.inputFormat = 'hh:mm:ss:SS a';
                 timePicker.value = new Date(date);
-                timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
-                timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
+                timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0, 0);
+                timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0, 0);
                 timePicker.itemsDelta = { hours: 2, minutes: 20, seconds: 15 };
                 fixture.detectChanges();
                 spyOn(timePicker.valueChange, 'emit').and.callThrough();
@@ -765,6 +766,12 @@ describe('IgxTimePicker', () => {
                 expect(timePicker.value).toEqual(date);
                 expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(3);
                 expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
+
+                timePicker.decrement(DatePart.FractionalSeconds);
+                date.setMilliseconds(date.getMilliseconds() - timePicker.itemsDelta.fractionalSeconds);
+                expect(timePicker.value).toEqual(date);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(4);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
             });
 
             it('should fire vallidationFailed on incrementing time outside min/max range', () => {
@@ -1114,6 +1121,7 @@ describe('IgxTimePicker', () => {
                 expect(timePicker.itemsDelta.hours).toEqual(1);
                 expect(timePicker.itemsDelta.minutes).toEqual(1);
                 expect(timePicker.itemsDelta.seconds).toEqual(1);
+                expect(timePicker.itemsDelta.fractionalSeconds).toEqual(1);
                 expect(timePicker.disabled).toEqual(false);
             });
 
@@ -1754,7 +1762,7 @@ export class IgxTimePickerTestComponent {
     @ViewChild('picker', { read: IgxTimePickerComponent, static: true })
     public timePicker: IgxTimePickerComponent;
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
-    public date = new Date(2021, 24, 2, 11, 45, 0);
+    public date = new Date(2021, 24, 2, 11, 45, 0, 0);
     public minValue;
     public maxValue;
 }

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -352,7 +352,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         }
         if (DateTimeUtil.isValidDate(this.value)) {
             // TODO: Update w/ clear behavior
-            return this.value.getHours() !== 0 || this.value.getMinutes() !== 0 || this.value.getSeconds() !== 0;
+            return this.value.getHours() !== 0 || this.value.getMinutes() !== 0 ||
+                   this.value.getSeconds() !== 0 || this.value.getMilliseconds() !== 0;
         }
         return !!this.dateTimeEditor.value;
     }
@@ -455,7 +456,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     private _resourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN);
     private _okButtonLabel = null;
     private _cancelButtonLabel = null;
-    private _itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> = { hours: 1, minutes: 1, seconds: 1 };
+    private _itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'> =
+                                             { hours: 1, minutes: 1, seconds: 1, fractionalSeconds: 1 };
 
     private _statusChanges$: Subscription;
     private _ngControl: NgControl = null;
@@ -596,11 +598,11 @@ export class IgxTimePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public set itemsDelta(value: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>) {
+    public set itemsDelta(value: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'>) {
         Object.assign(this._itemsDelta, value);
     }
 
-    public get itemsDelta(): Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> {
+    public get itemsDelta(): Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'> {
         return this._itemsDelta;
     }
 
@@ -653,6 +655,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
             hour: '2-digit',
             minute: '2-digit',
             second: '2-digit',
+            fractionalSecondDigits: 3
         });
     }
 
@@ -664,7 +667,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         const date = this.parseToDate(value);
         if (date) {
             this._dateValue = new Date();
-            this._dateValue.setHours(date.getHours(), date.getMinutes(), date.getSeconds());
+            this._dateValue.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
             this.setSelectedValue(this._dateValue);
         } else {
             this.setSelectedValue(null);
@@ -824,10 +827,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
         if (DateTimeUtil.isValidDate(this.value)) {
             const oldValue = new Date(this.value);
-            this.value.setHours(0, 0, 0);
+            this.value.setHours(0, 0, 0, 0);
             if (this.value.getTime() !== oldValue.getTime()) {
                 this.emitValueChange(oldValue, this.value);
-                this._dateValue.setHours(0, 0, 0);
+                this._dateValue.setHours(0, 0, 0, 0);
                 this.dateTimeEditor.value = new Date(this.value);
                 this.setSelectedValue(this._dateValue);
             }
@@ -1211,7 +1214,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
             this.value = newValue ? new Date(newValue) : newValue;
         } else if (isDate(this.value)) {
             const date = new Date(this.value);
-            date.setHours(newValue?.getHours() || 0, newValue?.getMinutes() || 0, newValue?.getSeconds() || 0);
+            date.setHours(newValue?.getHours() || 0, newValue?.getMinutes() || 0, newValue?.getSeconds() || 0, newValue?.getMilliseconds() || 0);
             this.value = date;
         } else {
             this.value = newValue ? this.toISOString(newValue) : newValue;
@@ -1220,7 +1223,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
     private updateEditorValue(): void {
         const date = this.dateTimeEditor.value ? new Date(this.dateTimeEditor.value) : new Date();
-        date.setHours(this._selectedDate.getHours(), this._selectedDate.getMinutes(), this._selectedDate.getSeconds());
+        date.setHours(this._selectedDate.getHours(), this._selectedDate.getMinutes(), this._selectedDate.getSeconds(), this._selectedDate.getMilliseconds());
         this.dateTimeEditor.value = date;
     }
 

src/app/time-picker/time-picker.sample.ts

@@ -32,7 +32,7 @@ export class TimePickerSampleComponent {
     public target: IgxInputDirective;
 
     public itemsDelta = { hours: 1, minutes: 15, seconds: 20 };
-    public format = 'hh:mm:ss a';
+    public format = 'hh:mm:ss:SS a';
     public spinLoop = true;
     public datePart = DatePart.Hours;