Added string type to date and time pipe inputs.

Author: KemalPajevic

libs/extensions/angular/localization/src/date-time/abstract-timezone-compensating.pipe.ts

@@ -13,12 +13,12 @@ export abstract class AbstractTimezoneCompensatingPipe implements PipeTransform
 
   abstract transform(value: unknown, ...args: unknown[]): unknown;
 
-  protected format(time: number | Date, formatPattern: string): string {
+  protected format(time: number | Date | string, formatPattern: string): string {
     if (!time) {
       return '';
     }
 
-    const date = typeof time === 'number' ? new Date(time) : time;
+    const date = typeof time === 'number' || typeof time === 'string' ? new Date(time) : time;
 
     const timeZone = this.config.timeZone;
     const options = this.getIntlOptions(formatPattern);

libs/extensions/angular/localization/src/date-time/date-only/date-only.pipe.ts

@@ -11,7 +11,7 @@ import { DateFormats } from '../date-formats';
   standalone: true,
 })
 export class DateOnlyPipe extends AbstractTimezoneCompensatingPipe implements PipeTransform {
-  transform(input: number | Date): string {
+  transform(input: number | Date | string): string {
     return this.format(input, DateFormats.SHORT_DATE_FORMAT);
   }
 }

libs/extensions/angular/localization/src/date-time/time-only/time-only.pipe.ts

@@ -18,7 +18,7 @@ export type TimeOnlyFormat = 'short' | 'medium';
   standalone: true,
 })
 export class TimeOnlyPipe extends AbstractTimezoneCompensatingPipe implements PipeTransform {
-  transform(input: number | Date, format: TimeOnlyFormat = 'short'): string {
+  transform(input: number | Date | string, format: TimeOnlyFormat = 'short'): string {
     return this.format(input, this.getFormat(format));
   }
 

libs/extensions/angular/localization/src/date-time/time-or-date/time-or-date.pipe.ts

@@ -18,15 +18,15 @@ import { DateFormats } from '../date-formats';
 })
 export class TimeOrDatePipe extends AbstractTimezoneCompensatingPipe implements PipeTransform {
   transform(
-    time: number | Date,
+    time: number | Date | string,
     showSeconds = false,
     formatMonth: 'month-as-digits' | 'month-as-letters' = 'month-as-digits'
   ): string {
     if (!time) {
       return '';
     }
 
-    const date = typeof time === 'number' ? new Date(time) : time;
+    const date = typeof time === 'number' || typeof time === 'string' ? new Date(time) : time;
 
     const today = new Date();
     const sameDay =

libs/extensions/angular/localization/src/date-time/time-or-date/time-or-date.stories.ts

@@ -23,12 +23,12 @@ export class TimeOrDateExampleComponent {
   /**
    * An example timestamp to be formatted.
    */
-  @Input() myTimestamp!: number | Date;
+  @Input() myTimestamp!: number | Date | string;
 
   /**
    * The timestamp to be formatted.
    */
-  @Input() tomorrowTimestamp: number | Date = new Date(
+  @Input() tomorrowTimestamp: number | Date | string = new Date(
     new Date().setDate(new Date().getDate() + 1)
   );
 

libs/extensions/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/extensions-angular",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "peerDependencies": {
     "@angular/common": "^18.0.0 || ^19.0.0",
     "@angular/compiler": "^18.0.0 || ^19.0.0",