@@ -88,6 +124,7 @@ export default class CardPageComponent {
protected readonly defaultCode = defaultCode;
protected readonly defaultImports = defaultImports;
protected readonly codeSkeleton = codeSkeleton;
+ protected readonly datePickerConfigCode = datePickerConfigCode;
protected readonly datePickerFormCode = datePickerFormCode;
protected readonly datePickerFormatCode = datePickerFormatCode;
}
diff --git a/libs/ui/date-picker/helm/src/index.ts b/libs/ui/date-picker/helm/src/index.ts
index 889a46d6d..2ec89c3be 100644
--- a/libs/ui/date-picker/helm/src/index.ts
+++ b/libs/ui/date-picker/helm/src/index.ts
@@ -1,6 +1,8 @@
import { NgModule } from '@angular/core';
import { HlmDatePickerComponent } from './lib/hlm-date-picker.component';
+export * from './lib/hlm-date-format.token';
+
export * from './lib/hlm-date-picker.component';
@NgModule({
diff --git a/libs/ui/date-picker/helm/src/lib/hlm-date-format.token.ts b/libs/ui/date-picker/helm/src/lib/hlm-date-format.token.ts
new file mode 100644
index 000000000..a0f992f35
--- /dev/null
+++ b/libs/ui/date-picker/helm/src/lib/hlm-date-format.token.ts
@@ -0,0 +1,25 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerConfig {
+ /**
+ * Defines how the date should be displayed in the UI.
+ *
+ * @param date
+ * @returns formatted date
+ */
+ formatDate: (date: T) => string;
+}
+
+const defaultConfig: HlmDatePickerConfig = {
+ formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+};
+
+const HlmDatePickerConfigToken = new InjectionToken>('HlmDatePickerConfig');
+
+export function provideHlmDatePickerConfig(config?: HlmDatePickerConfig): ValueProvider {
+ return { provide: HlmDatePickerConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmDatePickerConfig(): HlmDatePickerConfig {
+ return inject(HlmDatePickerConfigToken, { optional: true }) ?? (defaultConfig as HlmDatePickerConfig);
+}
diff --git a/libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts b/libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts
index 151bee597..5fc848c9e 100644
--- a/libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts
+++ b/libs/ui/date-picker/helm/src/lib/hlm-date-picker.component.ts
@@ -10,6 +10,7 @@ import { HlmCalendarComponent } from '@spartan-ng/ui-calendar-helm';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm';
import type { ClassValue } from 'clsx';
+import { injectHlmDatePickerConfig } from './hlm-date-format.token';
export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
@@ -58,6 +59,8 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
},
})
export class HlmDatePickerComponent {
+ private readonly _config = injectHlmDatePickerConfig();
+
public readonly userClass = input('', { alias: 'class' });
protected readonly _computedClass = computed(() =>
hlm(
@@ -88,18 +91,12 @@ export class HlmDatePickerComponent {
disabled: signal(this.disabled()),
}));
- public readonly dateFormat = input<(date: T) => string>((date) =>
- date instanceof Date ? date.toDateString() : `${date}`,
- );
+ /** Defines how the date should be displayed in the UI. */
+ public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
protected readonly formattedDate = computed(() => {
const date = this.date();
-
- if (!date) {
- return undefined;
- }
-
- return this.dateFormat()(date);
+ return date ? this.formatDate()(date) : undefined;
});
public readonly changed = output();