Merge pull request #5104 from abpframework/refactor/extensible-table-date-format

Changed the date formats in ExtensibleTableComponent

npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts

@@ -1,4 +1,9 @@
-import { ConfigStateService, getShortDateFormat, getShortDateShortTimeFormat } from '@abp/ng.core';
+import {
+  ConfigStateService,
+  getShortDateFormat,
+  getShortDateShortTimeFormat,
+  getShortTimeFormat,
+} from '@abp/ng.core';
 
 const dateTimeFormat = {
   calendarAlgorithmType: 'SolarCalendar',
@@ -27,6 +32,16 @@ describe('Date Utils', () => {
     });
   });
 
+  describe('#getShortTimeFormat', () => {
+    test('should get the short time format from ConfigState and return it', () => {
+      const getDeepSpy = jest.spyOn(config, 'getDeep');
+      getDeepSpy.mockReturnValueOnce(dateTimeFormat);
+
+      expect(getShortTimeFormat(config)).toBe('h:mm a');
+      expect(getDeepSpy).toHaveBeenCalledWith('localization.currentCulture.dateTimeFormat');
+    });
+  });
+
   describe('#getShortDateShortTimeFormat', () => {
     test('should get the short date time format from ConfigState and return it', () => {
       const getDeepSpy = jest.spyOn(config, 'getDeep');

npm/ng-packs/packages/core/src/lib/utils/date-utils.ts

@@ -9,6 +9,14 @@ export function getShortDateFormat(configStateService: ConfigStateService) {
   return dateTimeFormat.shortDatePattern;
 }
 
+export function getShortTimeFormat(configStateService: ConfigStateService) {
+  const dateTimeFormat = configStateService.getDeep(
+    'localization.currentCulture.dateTimeFormat',
+  ) as ApplicationConfiguration.DateTimeFormat;
+
+  return dateTimeFormat.shortTimePattern.replace('tt', 'a');
+}
+
 export function getShortDateShortTimeFormat(configStateService: ConfigStateService) {
   const dateTimeFormat = configStateService.getDeep(
     'localization.currentCulture.dateTimeFormat',

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts

@@ -1,4 +1,10 @@
-import { ListService } from '@abp/ng.core';
+import {
+  ListService,
+  ConfigStateService,
+  getShortDateFormat,
+  getShortDateShortTimeFormat,
+  getShortTimeFormat,
+} from '@abp/ng.core';
 import { formatDate } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -59,7 +65,11 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
-  constructor(@Inject(LOCALE_ID) private locale: string, injector: Injector) {
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+    private config: ConfigStateService,
+    injector: Injector,
+  ) {
     // tslint:disable-next-line
     this.getInjected = injector.get.bind(injector);
     const extensions = injector.get(ExtensionsService);
@@ -95,11 +105,11 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
           case ePropType.Boolean:
             return this.getIcon(value);
           case ePropType.Date:
-            return this.getDate(value, 'yyyy-MM-dd');
+            return this.getDate(value, getShortDateFormat(this.config));
           case ePropType.Time:
-            return this.getDate(value, 'HH:mm');
+            return this.getDate(value, getShortTimeFormat(this.config));
           case ePropType.DateTime:
-            return this.getDate(value, 'yyyy-MM-dd HH:mm:ss Z');
+            return this.getDate(value, getShortDateShortTimeFormat(this.config));
           default:
             return value;
           // More types can be handled in the future