feat(date-time-editor): fractional seconds support

Author: ddaribo

Diff for: projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts

@@ -9,7 +9,7 @@ const reduceToDictionary = (parts: DatePartInfo[]) => parts.reduce((obj, x) => {
 describe(`DateTimeUtil Unit tests`, () => {
     describe('Date Time Parsing', () => {
         it('should correctly parse all date time parts (base)', () => {
-            const result = DateTimeUtil.parseDateTimeFormat('dd/MM/yyyy HH:mm:ss a');
+            const result = DateTimeUtil.parseDateTimeFormat('dd/MM/yyyy HH:mm:ss:SS a');
             const expected = [
                 { start: 0, end: 2, type: DatePart.Date, format: 'dd' },
                 { start: 2, end: 3, type: DatePart.Literal, format: '/' },
@@ -22,8 +22,10 @@ describe(`DateTimeUtil Unit tests`, () => {
                 { start: 14, end: 16, type: DatePart.Minutes, format: 'mm' },
                 { start: 16, end: 17, type: DatePart.Literal, format: ':' },
                 { start: 17, end: 19, type: DatePart.Seconds, format: 'ss' },
-                { start: 19, end: 20, type: DatePart.Literal, format: ' ' },
-                { start: 20, end: 22, type: DatePart.AmPm, format: 'aa' }
+                { start: 19, end: 20, type: DatePart.Literal, format: ':' },
+                { start: 20, end: 23, type: DatePart.FractionalSeconds, format: 'SSS' },
+                { start: 23, end: 24, type: DatePart.Literal, format: ' ' },
+                { start: 24, end: 26, type: DatePart.AmPm, format: 'aa' }
             ];
             expect(JSON.stringify(result)).toEqual(JSON.stringify(expected));
         });
@@ -235,6 +237,7 @@ describe(`DateTimeUtil Unit tests`, () => {
         expect(DateTimeUtil.isDateOrTimeChar('h')).toBeTrue();
         expect(DateTimeUtil.isDateOrTimeChar('m')).toBeTrue();
         expect(DateTimeUtil.isDateOrTimeChar('s')).toBeTrue();
+        expect(DateTimeUtil.isDateOrTimeChar('S')).toBeTrue();
         expect(DateTimeUtil.isDateOrTimeChar(':')).toBeFalse();
         expect(DateTimeUtil.isDateOrTimeChar('/')).toBeFalse();
         expect(DateTimeUtil.isDateOrTimeChar('.')).toBeFalse();
@@ -414,6 +417,34 @@ describe(`DateTimeUtil Unit tests`, () => {
         expect(date.getTime()).toEqual(new Date(2015, 4, 20, 12, 59, 57).getTime());
     });
 
+    it('should spin fractional seconds portion correctly', () => {
+        // base
+        let date = new Date(2024, 3, 10, 6, 10, 5, 555);
+        DateTimeUtil.spinFractionalSeconds(1, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 556).getTime());
+        DateTimeUtil.spinFractionalSeconds(-1, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 555).getTime());
+
+        // delta !== 1
+        DateTimeUtil.spinFractionalSeconds(5, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 560).getTime());
+        DateTimeUtil.spinFractionalSeconds(-6, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 554).getTime());
+
+        // without looping over
+        date = new Date(2024, 3, 10, 6, 10, 5, 999);
+        DateTimeUtil.spinFractionalSeconds(1, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 999).getTime());
+        DateTimeUtil.spinFractionalSeconds(-1000, date, false);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 0).getTime());
+
+        // with looping over (seconds are not affected)
+        DateTimeUtil.spinFractionalSeconds(1001, date, true);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 1).getTime());
+        DateTimeUtil.spinFractionalSeconds(-5, date, true);
+        expect(date.getTime()).toEqual(new Date(2024, 3, 10, 6, 10, 5, 996).getTime());
+    });
+
     it('should spin AM/PM and a/p portion correctly', () => {
         const currentDate = new Date(2015, 4, 31, 4, 59, 59);
         const newDate = new Date(2015, 4, 31, 4, 59, 59);

Diff for: projects/igniteui-angular/src/lib/date-common/util/date-time.util.ts

@@ -56,7 +56,8 @@ export abstract class DateTimeUtil {
             return null;
         }
 
-        if (parts[DatePart.Hours] > 23 || parts[DatePart.Minutes] > 59 || parts[DatePart.Seconds] > 59) {
+        if (parts[DatePart.Hours] > 23 || parts[DatePart.Minutes] > 59
+            || parts[DatePart.Seconds] > 59 || parts[DatePart.FractionalSeconds] > 999) {
             return null;
         }
 
@@ -78,7 +79,8 @@ export abstract class DateTimeUtil {
             parts[DatePart.Date] || 1,
             parts[DatePart.Hours] || 0,
             parts[DatePart.Minutes] || 0,
-            parts[DatePart.Seconds] || 0
+            parts[DatePart.Seconds] || 0,
+            parts[DatePart.FractionalSeconds] || 0
         );
     }
 
@@ -176,6 +178,9 @@ export abstract class DateTimeUtil {
             case DatePart.Seconds:
                 maskedValue = value.getSeconds();
                 break;
+            case DatePart.FractionalSeconds:
+                maskedValue = value.getMilliseconds();
+                break;
             case DatePart.AmPm:
                 if (value.getHours() >= 12) {
                     maskedValue = partLength === 1 ? 'p' : 'PM';
@@ -335,6 +340,20 @@ export abstract class DateTimeUtil {
         newDate.setSeconds(seconds);
     }
 
+     /** Spins the fractional seconds (milliseconds) portion in a date-time editor. */
+    public static spinFractionalSeconds(delta: number, newDate: Date, spinLoop: boolean) {
+        const maxMs = 999;
+        const minMs = 0;
+        let ms = newDate.getMilliseconds() + delta;
+        if (ms > maxMs) {
+            ms = spinLoop ? ms % maxMs - 1 : maxMs;
+        } else if (ms < minMs) {
+            ms = spinLoop ? maxMs + (ms % maxMs) + 1 : minMs;
+        }
+
+        newDate.setMilliseconds(ms);
+    }
+
     /** Spins the AM/PM portion in a date-time editor. */
     public static spinAmPm(newDate: Date, currentDate: Date, amPmFromMask: string): Date {
         switch (amPmFromMask) {
@@ -543,6 +562,9 @@ export abstract class DateTimeUtil {
                     part.format = part.format.repeat(2);
                 }
                 break;
+            case DatePart.FractionalSeconds:
+                part.format = part.format[0].repeat(3);
+                break;
         }
     }
 
@@ -566,8 +588,9 @@ export abstract class DateTimeUtil {
             case 'm':
                 return DatePart.Minutes;
             case 's':
-            case 'S':
                 return DatePart.Seconds;
+            case 'S':
+                return DatePart.FractionalSeconds;
             case 'a':
             case 't':
             case 'T':

Diff for: projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.common.ts

@@ -14,6 +14,7 @@ export enum DatePart {
     Hours = 'hours',
     Minutes = 'minutes',
     Seconds = 'seconds',
+    FractionalSeconds = 'fractionalSeconds',
     AmPm = 'ampm',
     Literal = 'literal'
 }
@@ -34,4 +35,5 @@ export interface DatePartDeltas {
     hours?: number;
     minutes?: number;
     seconds?: number;
+    fractionalSeconds?: number;
 }