diff --git a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts index 2fe14b1e9b..ba8413e5ef 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts +++ b/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'); diff --git a/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts index 321af986da..ee44fb99cc 100644 --- a/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts +++ b/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', diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts index 47a7131201..84b47a02ac 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts +++ b/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 implements OnChanges { readonly trackByFn: TrackByFunction> = (_, 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 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