feat(theme-shared): add date parser formatter for ng-datepicker

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -20,6 +20,9 @@ import { ErrorHandler } from './handlers/error.handler';
 import { chartJsLoaded$ } from './utils/widget-utils';
 import { RootParams } from './models/common';
 import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
+import { DateParserFormatter } from './utils/date-parser-formatter';
+import { DatePipe } from '@angular/common';
 
 export function appendScript(injector: Injector) {
   const fn = () => {
@@ -68,6 +71,7 @@ export function appendScript(injector: Injector) {
     SortOrderIconComponent,
     TableSortDirective,
   ],
+  providers: [DatePipe],
   entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
@@ -88,6 +92,7 @@ export class ThemeSharedModule {
           useFactory: httpErrorConfigFactory,
           deps: [HTTP_ERROR_CONFIG],
         },
+        { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
       ],
     };
   }

npm/ng-packs/packages/theme-shared/src/lib/utils/date-parser-formatter.ts

@@ -0,0 +1,52 @@
+import { Injectable, Optional } from '@angular/core';
+import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { DatePipe } from '@angular/common';
+
+function padNumber(value: number) {
+  if (isNumber(value)) {
+    return `0${value}`.slice(-2);
+  } else {
+    return '';
+  }
+}
+
+function isNumber(value: any): boolean {
+  return !isNaN(toInteger(value));
+}
+
+function toInteger(value: any): number {
+  return parseInt(`${value}`, 10);
+}
+
+@Injectable()
+export class DateParserFormatter extends NgbDateParserFormatter {
+  constructor(@Optional() private datePipe: DatePipe) {
+    super();
+  }
+
+  parse(value: string): NgbDateStruct {
+    if (value) {
+      const dateParts = value.trim().split('-');
+      if (dateParts.length === 1 && isNumber(dateParts[0])) {
+        return { year: toInteger(dateParts[0]), month: null, day: null };
+      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
+        return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: null };
+      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
+        return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: toInteger(dateParts[2]) };
+      }
+    }
+    return null;
+  }
+
+  format(date: NgbDateStruct): string {
+    if (date && this.datePipe) {
+      return this.datePipe.transform(new Date(date.year, date.month, date.day), 'shortDate');
+    } else {
+      return date
+        ? `${date.year}-${isNumber(date.month) ? padNumber(date.month) : ''}-${
+            isNumber(date.day) ? padNumber(date.day) : ''
+          }`
+        : '';
+    }
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts

@@ -1 +1,2 @@
 export * from './widget-utils';
+export * from './date-parser-formatter';