feat(core): implement datetime formatter pipes

apps/docs/src/app/core/component-docs/date-picker/date-picker-docs.component.html

@@ -68,7 +68,8 @@
 <description>
     Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config. Note
     that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as
-    well.
+    well. The <code>dateFormat</code> pipe can also be utilized to convert the date into a string according to the
+    provided format.
 </description>
 <component-example>
     <fd-date-picker-format-example></fd-date-picker-format-example>
@@ -200,4 +201,4 @@
 <component-example name="'ex8'">
     <fd-date-picker-complex-i18n-example></fd-date-picker-complex-i18n-example>
 </component-example>
-<code-example [exampleFiles]="datePickerComplexI18n"></code-example> -->
+<code-example [exampleFiles]="datePickerComplexI18n"></code-example> -->

apps/docs/src/app/core/component-docs/date-picker/date-picker-docs.module.ts

@@ -23,6 +23,7 @@ import { SegmentedButtonModule } from '@fundamental-ngx/core/segmented-button';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { FdDatetimeModule } from '@fundamental-ngx/core/datetime';
 import { DatePickerModule } from '@fundamental-ngx/core/date-picker';
+import { PipeModule } from '@fundamental-ngx/core/utils';
 
 const routes: Routes = [
     {
@@ -43,7 +44,8 @@ const routes: Routes = [
         SegmentedButtonModule,
         InputGroupModule,
         FdDatetimeModule,
-        DatePickerModule
+        DatePickerModule,
+        PipeModule
     ],
     exports: [RouterModule],
     declarations: [

apps/docs/src/app/core/component-docs/date-picker/examples/date-picker-format-example.component.ts

@@ -24,13 +24,13 @@ export const CUSTOM_FD_DATETIME_FORMATS: DateTimeFormats = {
     selector: 'fd-date-picker-format-example',
     template: `
         <fd-date-picker [(ngModel)]="date" placeholder="dd-mm-yyyy"></fd-date-picker>
-        <br />
-        <div>Selected Date: {{ date?.toDateString() }}</div>
-        <br />
+        <br/>
+        <div>Selected Date: {{ date | dateFormat }}</div>
+        <br/>
         <fd-date-picker placeholder="mm/dd/yy to mm/dd/yy" type="range" [(ngModel)]="selectedRange"></fd-date-picker>
-        <br />
-        <div>Selected First Date: {{ selectedRange?.start?.toDateString() }}</div>
-        <div>Selected Last Date: {{ selectedRange?.end?.toDateString() }}</div>
+        <br/>
+        <div>Selected First Date: {{ selectedRange?.start | dateFormat }}</div>
+        <div>Selected Last Date: {{ selectedRange?.end | dateFormat }}</div>
     `,
     providers: [
         {

apps/docs/src/app/core/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -73,7 +73,8 @@
 <description>
     Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config. Note
     that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as
-    well.
+    well. The <code>dateTimeFormat</code> pipe can also be utilized to convert the date into a string according to the
+    provided format.
 </description>
 <component-example>
     <fd-datetime-format-example></fd-datetime-format-example>
@@ -125,4 +126,4 @@
 <component-example>
     <fd-datetime-picker-complex-i18n-example></fd-datetime-picker-complex-i18n-example>
 </component-example>
-<code-example [exampleFiles]="datetimeI18nComplex"></code-example>
+<code-example [exampleFiles]="datetimeI18nComplex"></code-example>

apps/docs/src/app/core/component-docs/datetime-picker/datetime-picker-docs.module.ts

@@ -19,6 +19,7 @@ import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { FdDatetimeModule } from '@fundamental-ngx/core/datetime';
 import { DatetimePickerModule } from '@fundamental-ngx/core/datetime-picker';
 import { SegmentedButtonModule } from '@fundamental-ngx/core/segmented-button';
+import { PipeModule } from '@fundamental-ngx/core/utils';
 
 const routes: Routes = [
     {
@@ -40,7 +41,8 @@ const routes: Routes = [
         DatetimePickerModule,
         SegmentedButtonModule,
         SharedDocumentationPageModule,
-        RouterModule.forChild(routes)
+        RouterModule.forChild(routes),
+        PipeModule
     ],
     exports: [RouterModule],
     declarations: [

apps/docs/src/app/core/component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component.html

@@ -5,4 +5,4 @@
 <br />
 <br />
 <br />
-Selected: {{ date || 'null' }}
+Selected: {{ date | dateTimeFormat: 'null' }}

libs/core/src/lib/datetime/datetime-adapter.ts

@@ -339,6 +339,12 @@ export abstract class DatetimeAdapter<D> {
      */
     abstract isTimeFormatIncludesSeconds(displayFormat: unknown): boolean;
 
+    /**
+     * @param date The date being referenced.
+     * @returns String representing how much time has passed since the date param.
+     */
+    abstract fromNow?(date: D): string;
+
     /**
      * Compares two dates.
      * @param first The first date to compare.

libs/core/src/lib/datetime/datetime-format.pipes.ts

@@ -0,0 +1,60 @@
+import { Inject, Optional, Pipe, PipeTransform } from '@angular/core';
+import { DATE_TIME_FORMATS, DateTimeFormats } from './datetime-formats';
+import { DatetimeAdapter } from './datetime-adapter';
+
+@Pipe({
+    name: 'dateFormat'
+})
+export class DateFormatPipe<D> implements PipeTransform {
+    constructor(
+        private _dateTimeAdapter: DatetimeAdapter<D>,
+        @Optional() @Inject(DATE_TIME_FORMATS) private _dateTimeFormats: DateTimeFormats
+    ) {}
+
+    transform(date: D, noDateMessage: string): string {
+        if (date) {
+            return this._dateTimeAdapter.format(date, this._dateTimeFormats.display.dateInput);
+        } else {
+            return noDateMessage;
+        }
+    }
+}
+
+@Pipe({
+    name: 'dateTimeFormat'
+})
+export class DateTimeFormatPipe<D> implements PipeTransform {
+    constructor(
+        private _dateTimeAdapter: DatetimeAdapter<D>,
+        @Optional() @Inject(DATE_TIME_FORMATS) private _dateTimeFormats: DateTimeFormats
+    ) {}
+
+    transform(date: D, noDateMessage: string): string {
+        if (date) {
+            return this._dateTimeAdapter.format(date, this._dateTimeFormats.display.dateTimeInput);
+        } else {
+            return noDateMessage;
+        }
+    }
+}
+
+@Pipe({
+    name: 'dateFromNow'
+})
+export class DateFromNowPipe<D> implements PipeTransform {
+    constructor(
+        private _dateTimeAdapter: DatetimeAdapter<D>
+    ) {}
+
+    transform(date: D, noDateMessage: string): string {
+        if (this._dateTimeAdapter.fromNow && typeof this._dateTimeAdapter.fromNow !== 'undefined') {
+            if (date) {
+                return this._dateTimeAdapter.fromNow(date);
+            } else {
+                return noDateMessage;
+            }
+        } else {
+            console.warn('No fromNow function provided to the DatetimeAdapter');
+        }
+    }
+}

libs/core/src/lib/datetime/fd-datetime-adapter.ts

@@ -23,6 +23,8 @@ export class FdDatetimeAdapter extends DatetimeAdapter<FdDate> {
     /** Whether to clamp the date between 1 and 9999 to avoid IE and Edge errors. */
     private readonly _fixYearsRangeIssue: boolean;
 
+    fromNow: undefined;
+
     constructor(@Optional() @Inject(LOCALE_ID) localeId: string, platform: Platform) {
         super();
 

libs/core/src/lib/datetime/fd-datetime.module.ts

@@ -5,6 +5,7 @@ import { DatetimeAdapter } from './datetime-adapter';
 import { FdDatetimeAdapter } from './fd-datetime-adapter';
 import { DATE_TIME_FORMATS } from './datetime-formats';
 import { FD_DATETIME_FORMATS } from './fd-date-formats';
+import { DateFormatPipe, DateFromNowPipe, DateTimeFormatPipe } from './datetime-format.pipes';
 
 @NgModule({
     imports: [PlatformModule],
@@ -14,6 +15,8 @@ export class FdDatetimeAdapterModule {}
 
 @NgModule({
     imports: [FdDatetimeAdapterModule],
+    declarations: [DateFormatPipe, DateTimeFormatPipe, DateFromNowPipe],
+    exports: [DateFormatPipe, DateTimeFormatPipe, DateFromNowPipe],
     providers: [{ provide: DATE_TIME_FORMATS, useValue: FD_DATETIME_FORMATS }]
 })
 export class FdDatetimeModule {}

libs/core/src/lib/utils/pipes/pipe.module.ts

@@ -7,7 +7,19 @@ import { ListGroupPipe } from './list-group.pipe';
 import { SafePipe } from './safe.pipe';
 
 @NgModule({
-    declarations: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, ListGroupPipe, SafePipe],
-    exports: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, ListGroupPipe, SafePipe]
+    declarations: [
+        DisplayFnPipe,
+        SearchHighlightPipe,
+        TwoDigitsPipe,
+        ListGroupPipe,
+        SafePipe,
+    ],
+    exports: [
+        DisplayFnPipe,
+        SearchHighlightPipe,
+        TwoDigitsPipe,
+        ListGroupPipe,
+        SafePipe
+    ]
 })
-export class PipeModule { }
+export class PipeModule {}