From 8309d2dc552b28dda7c15fca2f122519eea4ec8e Mon Sep 17 00:00:00 2001 From: Darren Thornton <6361057+dthornton-hyl@users.noreply.github.com> Date: Wed, 13 May 2026 12:12:21 -0500 Subject: [PATCH] AAE-44065 Change date picker to match other styles (#11868) * AAE-44065 Change date picker to match other styles * Apply Copilot suggestions --- lib/process-services-cloud/package.json | 1 + .../widgets/date/date-cloud.widget.html | 30 +++++++++++-------- .../widgets/date/date-cloud.widget.ts | 20 ++++++++----- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/lib/process-services-cloud/package.json b/lib/process-services-cloud/package.json index c127d9831d..307b14aacc 100644 --- a/lib/process-services-cloud/package.json +++ b/lib/process-services-cloud/package.json @@ -24,6 +24,7 @@ "@alfresco/js-api": ">=9.4.1", "@alfresco/adf-core": ">=8.4.1", "@alfresco/adf-content-services": ">=8.4.1", + "@mat-datetimepicker/core": ">=12.0.1", "@apollo/client": ">=3.7.2", "@ngx-translate/core": ">=17.0.0", "apollo-angular": ">=4.0.1", diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index 8c8c243986..1e698d397a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -4,15 +4,17 @@ [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched" [class.adf-left-label-input-container]="field.leftLabels" > -
- -
+ @if (field.leftLabels) { +
+ +
+ }
@if ( (field.name || field?.required) && !field.leftLabels) { @@ -23,7 +25,7 @@ - - + +
- + @if (dateInputControl.invalid && dateInputControl.touched) { + + }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts index 83b99fd3f8..c7099473eb 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts @@ -22,6 +22,8 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { ADF_DATE_FORMATS, AdfDateFnsAdapter, + ADF_DATETIME_FORMATS, + AdfDateTimeFnsAdapter, DateFnsUtils, DEFAULT_DATE_FORMAT, ErrorMessageModel, @@ -30,10 +32,9 @@ import { WidgetComponent, ReactiveFormWidget } from '@alfresco/adf-core'; -import { MatDatepickerModule } from '@angular/material/datepicker'; +import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerModule } from '@mat-datetimepicker/core'; import { addDays, parseISO } from 'date-fns'; import { FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms'; -import { NgIf } from '@angular/common'; import { TranslatePipe } from '@ngx-translate/core'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; @@ -41,10 +42,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'date-widget', - imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, ErrorWidgetComponent], + imports: [TranslatePipe, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, ReactiveFormsModule, ErrorWidgetComponent], providers: [ { provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS }, - { provide: DateAdapter, useClass: AdfDateFnsAdapter } + { provide: DateAdapter, useClass: AdfDateFnsAdapter }, + { provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS }, + { provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter } ], templateUrl: './date-cloud.widget.html', styleUrls: ['./date-cloud.widget.scss'], @@ -74,6 +77,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, private readonly destroyRef = inject(DestroyRef); private readonly dateAdapter = inject(DateAdapter); + private readonly dateTimeAdapter = inject(DatetimeAdapter); ngOnInit(): void { this.setFormControlValue(); @@ -176,12 +180,14 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, if (this.field?.dateDisplayFormat) { const adapter = this.dateAdapter as AdfDateFnsAdapter; adapter.displayFormat = this.field.dateDisplayFormat; + const dateTimeAdapter = this.dateTimeAdapter as AdfDateTimeFnsAdapter; + dateTimeAdapter.displayFormat = this.field.dateDisplayFormat; } } private initStartAt(): void { if (this.field?.value) { - this.startAt = this.dateAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT); + this.startAt = this.dateTimeAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT); } } @@ -198,14 +204,14 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, this.minDate = null; this.field.minValue = null; } else { - this.minDate = addDays(this.dateAdapter.today(), this.field.minDateRangeValue); + this.minDate = addDays(this.dateTimeAdapter.today(), this.field.minDateRangeValue); this.field.minValue = DateFnsUtils.formatDate(this.minDate, DEFAULT_DATE_FORMAT); } if (this.field.maxDateRangeValue === null) { this.maxDate = null; this.field.maxValue = null; } else { - this.maxDate = addDays(this.dateAdapter.today(), this.field.maxDateRangeValue); + this.maxDate = addDays(this.dateTimeAdapter.today(), this.field.maxDateRangeValue); this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, DEFAULT_DATE_FORMAT); } }