diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
index 07410406db..e7d16fec66 100644
--- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
@@ -67,19 +67,25 @@ const renderDateCell = (dateConfig: DateConfig, value: number | string | Date, t
};
const checkDisplayedDate = (expectedDate: string) => {
- const displayedDate = testingUtils.getByCSS('span').nativeElement.textContent.trim();
+ const displayedDate = testingUtils.getByCSS('time').nativeElement.textContent.trim();
expect(displayedDate).toBeTruthy();
expect(displayedDate).toBe(expectedDate);
};
const checkDisplayedTooltip = (expectedTooltip: string) => {
- const displayedTooltip = testingUtils.getByCSS('span').nativeElement.title;
+ const displayedTooltip = testingUtils.getByCSS('time').nativeElement.title;
expect(displayedTooltip).toBeTruthy();
expect(displayedTooltip).toBe(expectedTooltip);
};
+const checkDatetimeAttribute = (expectedIso: string) => {
+ const datetime = testingUtils.getByCSS('time').nativeElement.getAttribute('datetime');
+
+ expect(datetime).toBe(expectedIso);
+};
+
const configureTestingModule = (providers: any[]) => {
TestBed.configureTestingModule({
imports: [DateCellComponent],
@@ -141,7 +147,7 @@ describe('DateCellComponent', () => {
expect(component.config().locale).toEqual('en-US');
});
- it('should display date and tooltip with defaules values if NO dateConfig or appConfig is provided', () => {
+ it('should display date and tooltip with default values if NO dateConfig or appConfig is provided', () => {
appConfigService.config = {
dateValues: {}
};
@@ -232,6 +238,16 @@ describe('DateCellComponent', () => {
renderDateCell(mockDateConfig, mockTimestamp);
checkDisplayedDate(expectedDate);
});
+
+ it('should render a datetime attribute with the full ISO date value', () => {
+ const mockDateConfig: DateConfig = {
+ format: 'short',
+ tooltipFormat: 'short'
+ };
+
+ renderDateCell(mockDateConfig, mockDate);
+ checkDatetimeAttribute(mockDate.toISOString());
+ });
});
describe('DateCellComponent locale', () => {
diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
index 9ba78d30f1..8c8460bcc1 100644
--- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
+++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
@@ -26,7 +26,9 @@ import { toSignal } from '@angular/core/rxjs-interop';
selector: 'adf-date-cell',
template: `
@if (formattedDate()) {
- {{ formattedDate() }}
+
}
`,
encapsulation: ViewEncapsulation.None,
@@ -55,6 +57,14 @@ export class DateCellComponent extends DataTableCellComponent implements OnInit
// Convert value$ observable to signal for reactive computation
private readonly dateValue = toSignal(this.value$);
+ // Computed signal that automatically formats the date to ISO string for datetime attribute
+ protected readonly isoDate = computed(() => {
+ const date = this.dateValue();
+ const parsed = new Date(date);
+
+ return isNaN(parsed.getTime()) ? null : parsed.toISOString();
+ });
+
// Computed signal that automatically formats the date based on value and config
protected readonly formattedDate = computed(() => {
const date = this.dateValue();