Skip to content

Commit 5ab2f4e

Browse files
ddariboddaribo
committed
feat(time-picker): support fractional seconds for input
1 parent 5b2d65b commit 5ab2f4e

File tree

4 files changed

+26
-15
lines changed

4 files changed

+26
-15
lines changed

Diff for: ‎projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface IgxTimePickerBase {
1212
secondsList: ElementRef;
1313
ampmList: ElementRef;
1414
inputFormat: string;
15-
itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>;
15+
itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'>;
1616
spinLoop: boolean;
1717
selectedDate: Date;
1818
maxDropdownValue: Date;

Diff for: ‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

+12-4
Original file line numberDiff line numberDiff line change
@@ -740,10 +740,11 @@ describe('IgxTimePicker', () => {
740740
}));
741741

742742
it('should change date parts correctly and emit valueChange with increment() and decrement() methods', () => {
743-
const date = new Date(2020, 12, 12, 10, 30, 30);
743+
const date = new Date(2020, 12, 12, 10, 30, 30, 999);
744+
timePicker.inputFormat = 'hh:mm:ss:SS a';
744745
timePicker.value = new Date(date);
745-
timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
746-
timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
746+
timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0, 0);
747+
timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0, 0);
747748
timePicker.itemsDelta = { hours: 2, minutes: 20, seconds: 15 };
748749
fixture.detectChanges();
749750
spyOn(timePicker.valueChange, 'emit').and.callThrough();
@@ -765,6 +766,12 @@ describe('IgxTimePicker', () => {
765766
expect(timePicker.value).toEqual(date);
766767
expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(3);
767768
expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
769+
770+
timePicker.decrement(DatePart.FractionalSeconds);
771+
date.setMilliseconds(date.getMilliseconds() - timePicker.itemsDelta.fractionalSeconds);
772+
expect(timePicker.value).toEqual(date);
773+
expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(4);
774+
expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
768775
});
769776

770777
it('should fire vallidationFailed on incrementing time outside min/max range', () => {
@@ -1114,6 +1121,7 @@ describe('IgxTimePicker', () => {
11141121
expect(timePicker.itemsDelta.hours).toEqual(1);
11151122
expect(timePicker.itemsDelta.minutes).toEqual(1);
11161123
expect(timePicker.itemsDelta.seconds).toEqual(1);
1124+
expect(timePicker.itemsDelta.fractionalSeconds).toEqual(1);
11171125
expect(timePicker.disabled).toEqual(false);
11181126
});
11191127

@@ -1754,7 +1762,7 @@ export class IgxTimePickerTestComponent {
17541762
@ViewChild('picker', { read: IgxTimePickerComponent, static: true })
17551763
public timePicker: IgxTimePickerComponent;
17561764
public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
1757-
public date = new Date(2021, 24, 2, 11, 45, 0);
1765+
public date = new Date(2021, 24, 2, 11, 45, 0, 0);
17581766
public minValue;
17591767
public maxValue;
17601768
}

Diff for: ‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

+12-9
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
352352
}
353353
if (DateTimeUtil.isValidDate(this.value)) {
354354
// TODO: Update w/ clear behavior
355-
return this.value.getHours() !== 0 || this.value.getMinutes() !== 0 || this.value.getSeconds() !== 0;
355+
return this.value.getHours() !== 0 || this.value.getMinutes() !== 0 ||
356+
this.value.getSeconds() !== 0 || this.value.getMilliseconds() !== 0;
356357
}
357358
return !!this.dateTimeEditor.value;
358359
}
@@ -455,7 +456,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
455456
private _resourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN);
456457
private _okButtonLabel = null;
457458
private _cancelButtonLabel = null;
458-
private _itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> = { hours: 1, minutes: 1, seconds: 1 };
459+
private _itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'> =
460+
{ hours: 1, minutes: 1, seconds: 1, fractionalSeconds: 1 };
459461

460462
private _statusChanges$: Subscription;
461463
private _ngControl: NgControl = null;
@@ -596,11 +598,11 @@ export class IgxTimePickerComponent extends PickerBaseDirective
596598
* ```
597599
*/
598600
@Input()
599-
public set itemsDelta(value: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>) {
601+
public set itemsDelta(value: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'>) {
600602
Object.assign(this._itemsDelta, value);
601603
}
602604

603-
public get itemsDelta(): Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> {
605+
public get itemsDelta(): Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds' | 'fractionalSeconds'> {
604606
return this._itemsDelta;
605607
}
606608

@@ -653,6 +655,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
653655
hour: '2-digit',
654656
minute: '2-digit',
655657
second: '2-digit',
658+
fractionalSecondDigits: 3
656659
});
657660
}
658661

@@ -664,7 +667,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
664667
const date = this.parseToDate(value);
665668
if (date) {
666669
this._dateValue = new Date();
667-
this._dateValue.setHours(date.getHours(), date.getMinutes(), date.getSeconds());
670+
this._dateValue.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
668671
this.setSelectedValue(this._dateValue);
669672
} else {
670673
this.setSelectedValue(null);
@@ -824,10 +827,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
824827

825828
if (DateTimeUtil.isValidDate(this.value)) {
826829
const oldValue = new Date(this.value);
827-
this.value.setHours(0, 0, 0);
830+
this.value.setHours(0, 0, 0, 0);
828831
if (this.value.getTime() !== oldValue.getTime()) {
829832
this.emitValueChange(oldValue, this.value);
830-
this._dateValue.setHours(0, 0, 0);
833+
this._dateValue.setHours(0, 0, 0, 0);
831834
this.dateTimeEditor.value = new Date(this.value);
832835
this.setSelectedValue(this._dateValue);
833836
}
@@ -1211,7 +1214,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
12111214
this.value = newValue ? new Date(newValue) : newValue;
12121215
} else if (isDate(this.value)) {
12131216
const date = new Date(this.value);
1214-
date.setHours(newValue?.getHours() || 0, newValue?.getMinutes() || 0, newValue?.getSeconds() || 0);
1217+
date.setHours(newValue?.getHours() || 0, newValue?.getMinutes() || 0, newValue?.getSeconds() || 0, newValue?.getMilliseconds() || 0);
12151218
this.value = date;
12161219
} else {
12171220
this.value = newValue ? this.toISOString(newValue) : newValue;
@@ -1220,7 +1223,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
12201223

12211224
private updateEditorValue(): void {
12221225
const date = this.dateTimeEditor.value ? new Date(this.dateTimeEditor.value) : new Date();
1223-
date.setHours(this._selectedDate.getHours(), this._selectedDate.getMinutes(), this._selectedDate.getSeconds());
1226+
date.setHours(this._selectedDate.getHours(), this._selectedDate.getMinutes(), this._selectedDate.getSeconds(), this._selectedDate.getMilliseconds());
12241227
this.dateTimeEditor.value = date;
12251228
}
12261229

Diff for: ‎src/app/time-picker/time-picker.sample.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class TimePickerSampleComponent {
3232
public target: IgxInputDirective;
3333

3434
public itemsDelta = { hours: 1, minutes: 15, seconds: 20 };
35-
public format = 'hh:mm:ss a';
35+
public format = 'hh:mm:ss:SS a';
3636
public spinLoop = true;
3737
public datePart = DatePart.Hours;
3838

0 commit comments

Comments
 (0)