Merge pull request #11912 from abpframework/Issue/11909

feat: Convert short date,time and datetime functions to pipe #11909

docs/en/UI/Angular/DateTime-Format-Pipe.md

@@ -0,0 +1,29 @@
+# DateTime Format Pipes
+
+You can format date by Date pipe of angular.
+
+Example
+
+```html
+<span> {{today | date 'dd/mm/yy'}}</span>
+```
+
+ShortDate, ShortTime and ShortDateTime format data like angular's data pipe but easier. Also the pipes get format from config service by culture.
+
+# ShortDate Pipe
+
+```html
+<span> {{today | shortDatePipe }}</span>
+```
+
+# ShortTime Pipe
+
+```html
+<span> {{today | shortTimePipe }}</span>
+```
+
+# ShortDateTime Pipe
+
+```html
+<span> {{today | shortDateTimePipe }}</span>
+```

docs/en/docs-nav.json

@@ -1097,10 +1097,10 @@
                 {
                   "text": "Extensions",
                   "items": [
-                     {
+                    {
                       "text": "Overall",
                       "path": "UI/Angular/Extensions-Overall.md"
-                     },
+                    },
                     {
                       "text": "Entity Action Extensions",
                       "path": "UI/Angular/Entity-Action-Extensions.md"
@@ -1116,6 +1116,10 @@
                     {
                       "text": "Dynamic Form Extensions",
                       "path": "UI/Angular/Dynamic-Form-Extensions.md"
+                    },
+                    {
+                      "text": "Date, time and datetime format pipes",
+                      "path": "UI/Angular/DateTime-Format-Pipe.md"
                     }
                   ]
                 }

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -34,6 +34,9 @@ import { TENANT_KEY } from './tokens/tenant-key.token';
 import { noop } from './utils/common-utils';
 import './utils/date-extensions';
 import { getInitialData, localeInitializer } from './utils/initial-utils';
+import { ShortDateTimePipe } from './pipes/short-date-time.pipe';
+import { ShortTimePipe } from './pipes/short-time.pipe';
+import { ShortDatePipe } from './pipes/short-date.pipe';
 
 export function storageFactory(): OAuthStorage {
   return oAuthStorage;
@@ -67,6 +70,9 @@ export function storageFactory(): OAuthStorage {
         SortPipe,
         StopPropagationDirective,
         ToInjectorPipe,
+        ShortDateTimePipe,
+        ShortTimePipe,
+        ShortDatePipe
     ],
     imports: [
         OAuthModule,
@@ -92,6 +98,10 @@ export function storageFactory(): OAuthStorage {
         SortPipe,
         StopPropagationDirective,
         ToInjectorPipe,
+        ShortDateTimePipe,
+        ShortTimePipe,
+        ShortDatePipe
+
     ],
     providers: [LocalizationPipe]
 })

npm/ng-packs/packages/core/src/lib/pipes/index.ts

@@ -1,3 +1,6 @@
 export * from './localization.pipe';
 export * from './sort.pipe';
 export * from './to-injector.pipe';
+export * from './short-date.pipe';
+export * from './short-time.pipe';
+export * from './short-date-time.pipe';

npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts

@@ -0,0 +1,32 @@
+import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common';
+import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core';
+import { ConfigStateService } from '../services';
+import { getShortDateShortTimeFormat } from '../utils/date-utils';
+
+@Pipe({
+  name: 'shortDateTime',
+  pure: true,
+})
+export class ShortDateTimePipe extends DatePipe implements PipeTransform {
+
+  constructor(private configStateService: ConfigStateService,
+    @Inject(LOCALE_ID) locale: string,
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    ) {
+    super(locale, defaultTimezone)
+  }
+
+  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
+  transform(
+    value: string|number|Date|null|undefined, timezone?: string,
+    locale?: string): string|null {
+
+  const format = getShortDateShortTimeFormat(this.configStateService);
+  return super.transform(value,format,timezone,locale)
+  }
+
+
+}
+
+

npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts

@@ -0,0 +1,32 @@
+import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common';
+import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core';
+import { ConfigStateService } from '../services';
+import { getShortDateFormat } from '../utils/date-utils';
+
+@Pipe({
+  name: 'shortDate',
+  pure: true,
+})
+export class ShortDatePipe extends DatePipe implements PipeTransform {
+
+  constructor(private configStateService: ConfigStateService,
+    @Inject(LOCALE_ID) locale: string,
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    ) {
+    super(locale, defaultTimezone)
+  }
+
+  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
+  transform(
+    value: string|number|Date|null|undefined, timezone?: string,
+    locale?: string): string|null {
+
+  const format = getShortDateFormat(this.configStateService);
+  return super.transform(value,format,timezone,locale)
+  }
+
+
+}
+
+

npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts

@@ -0,0 +1,32 @@
+import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common';
+import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core';
+import { ConfigStateService } from '../services';
+import { getShortTimeFormat } from '../utils/date-utils';
+
+@Pipe({
+  name: 'shortTime',
+  pure: true,
+})
+export class ShortTimePipe extends DatePipe implements PipeTransform {
+
+  constructor(private configStateService: ConfigStateService,
+    @Inject(LOCALE_ID) locale: string,
+    @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional()  defaultTimezone?: string|null
+    ) {
+    super(locale, defaultTimezone)
+  }
+
+  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
+  transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
+  transform(
+    value: string|number|Date|null|undefined, timezone?: string,
+    locale?: string): string|null {
+
+  const format = getShortTimeFormat(this.configStateService);
+  return super.transform(value,format,timezone,locale)
+  }
+
+
+}
+
+