inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "AAE-44065 Change date picker to match other styles (#11868)" (#11896)

Browse Source 
This reverts commit 8309d2dc55.
This commit is contained in:
Darren Thornton
2026-05-19 14:54:26 -05:00
committed by GitHub
parent 1fbd869902
commit 1d163c6749
3 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+13 -17
View File
@@ -4,17 +4,15 @@
[class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
[class.adf-left-label-input-container]="field.leftLabels"
>
@if (field.leftLabels) {
<div>
<label class="adf-label adf-left-label" [attr.for]="field.id"
>{{field.name | translate }} ({{field.dateDisplayFormat}})<span
class="adf-asterisk"
[style.visibility]="isRequired() ? 'visible' : 'hidden'"
>*</span
></label
>
</div>
}
<div *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id"
>{{field.name | translate }} ({{field.dateDisplayFormat}})<span
class="adf-asterisk"
[style.visibility]="isRequired() ? 'visible' : 'hidden'"
>*</span
></label
>
</div>
<div class="adf-date-widget-container">
<mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
@if ( (field.name || field?.required) && !field.leftLabels) {
@@ -25,7 +23,7 @@
<input
matInput
class="adf-input"
[matDatetimepicker]="datetimePicker"
[matDatepicker]="datePicker"
[id]="field.id"
[formControl]="dateInputControl"
[placeholder]="field.placeholder"
@@ -34,13 +32,11 @@
[max]="maxDate"
[title]="field.tooltip"
/>
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly" />
<mat-datetimepicker #datetimePicker type="date" [startAt]="startAt" [disabled]="field.readOnly" />
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
<mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
</mat-form-field>
<div class="adf-error-messages-container">
@if (dateInputControl.invalid && dateInputControl.touched) {
<error-widget [error]="field.validationSummary" />
}
<error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
</div>
</div>
</div>
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
+7 -13
View File
@@ -22,8 +22,6 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import {
ADF_DATE_FORMATS,
AdfDateFnsAdapter,
ADF_DATETIME_FORMATS,
AdfDateTimeFnsAdapter,
DateFnsUtils,
DEFAULT_DATE_FORMAT,
ErrorMessageModel,
@@ -32,9 +30,10 @@ import {
WidgetComponent,
ReactiveFormWidget
} from '@alfresco/adf-core';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerModule } from '@mat-datetimepicker/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
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';
@@ -42,12 +41,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'date-widget',
imports: [TranslatePipe, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, ReactiveFormsModule, ErrorWidgetComponent],
imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, ErrorWidgetComponent],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
templateUrl: './date-cloud.widget.html',
styleUrls: ['./date-cloud.widget.scss'],
@@ -77,7 +74,6 @@ 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();
@@ -180,14 +176,12 @@ 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.dateTimeAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT);
this.startAt = this.dateAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT);
}
}
@@ -204,14 +198,14 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
this.minDate = null;
this.field.minValue = null;
} else {
this.minDate = addDays(this.dateTimeAdapter.today(), this.field.minDateRangeValue);
this.minDate = addDays(this.dateAdapter.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.dateTimeAdapter.today(), this.field.maxDateRangeValue);
this.maxDate = addDays(this.dateAdapter.today(), this.field.maxDateRangeValue);
this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, DEFAULT_DATE_FORMAT);
}
}