mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ACS-5857] made dateFormat configurable for DateCloudWidget
This commit is contained in:
+2
-2
@@ -22,11 +22,11 @@
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
|
||||
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
|
||||
<input
|
||||
type="hidden"
|
||||
[matDatepicker]="datePicker"
|
||||
[value]="field.value | adfDate: DATE_FORMAT"
|
||||
[value]="field.value | adfDate: field.dateDisplayFormat"
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[disabled]="field.readOnly"
|
||||
|
||||
+10
-9
@@ -22,6 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { addDays, format, subDays } from 'date-fns';
|
||||
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
|
||||
|
||||
describe('DateWidgetComponent', () => {
|
||||
|
||||
@@ -51,7 +52,7 @@ describe('DateWidgetComponent', () => {
|
||||
|
||||
widget.ngOnInit();
|
||||
|
||||
const expected = format(new Date(minValue), widget.DATE_FORMAT);
|
||||
const expected = format(new Date(minValue), DATE_FORMAT_CLOUD);
|
||||
expect(widget.minDate).toEqual(expected);
|
||||
});
|
||||
|
||||
@@ -74,7 +75,7 @@ describe('DateWidgetComponent', () => {
|
||||
});
|
||||
widget.ngOnInit();
|
||||
|
||||
const expected = format(new Date(maxValue), widget.DATE_FORMAT);
|
||||
const expected = format(new Date(maxValue), DATE_FORMAT_CLOUD);
|
||||
expect(widget.maxDate).toEqual(expected);
|
||||
});
|
||||
|
||||
@@ -91,7 +92,7 @@ describe('DateWidgetComponent', () => {
|
||||
|
||||
widget.field = field;
|
||||
const todayDate = new Date();
|
||||
widget.onDateChanged({ value: format(todayDate, widget.DATE_FORMAT) });
|
||||
widget.onDateChanged({ value: format(todayDate, DATE_FORMAT_CLOUD) });
|
||||
|
||||
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
|
||||
});
|
||||
@@ -293,7 +294,7 @@ describe('DateWidgetComponent', () => {
|
||||
await fixture.whenStable();
|
||||
|
||||
const todayDate = new Date();
|
||||
const expected = format(subDays(todayDate, widget.field.minDateRangeValue), widget.DATE_FORMAT);
|
||||
const expected = format(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD);
|
||||
expect(widget.minDate).toEqual(expected);
|
||||
});
|
||||
|
||||
@@ -343,7 +344,7 @@ describe('DateWidgetComponent', () => {
|
||||
await fixture.whenStable();
|
||||
|
||||
const todayDate = new Date();
|
||||
const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), widget.DATE_FORMAT);
|
||||
const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
|
||||
expect(widget.maxDate).toEqual(expected);
|
||||
});
|
||||
|
||||
@@ -403,7 +404,7 @@ describe('DateWidgetComponent', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const expectedMinValueString = format(new Date('2022-07-21'), widget.DATE_FORMAT);
|
||||
const expectedMinValueString = format(new Date('2022-07-21'), DATE_FORMAT_CLOUD);
|
||||
|
||||
expect(widget.field.minValue).toEqual(expectedMinValueString);
|
||||
expect(widget.maxDate).toBeUndefined();
|
||||
@@ -423,7 +424,7 @@ describe('DateWidgetComponent', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
|
||||
const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
|
||||
|
||||
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
|
||||
expect(widget.minDate).toBeUndefined();
|
||||
@@ -462,8 +463,8 @@ describe('DateWidgetComponent', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
|
||||
const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT);
|
||||
const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
|
||||
const expectedMinValueString = format(new Date('2022-07-12'), DATE_FORMAT_CLOUD);
|
||||
|
||||
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
|
||||
expect(widget.field.minValue).toEqual(expectedMinValueString);
|
||||
|
||||
+12
-8
@@ -17,13 +17,14 @@
|
||||
|
||||
/* eslint-disable @angular-eslint/component-selector */
|
||||
|
||||
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
|
||||
import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { WidgetComponent, UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils } from '@alfresco/adf-core';
|
||||
import { addDays, format, isValid, subDays } from 'date-fns';
|
||||
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
|
||||
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
|
||||
|
||||
@Component({
|
||||
selector: 'date-widget',
|
||||
@@ -57,7 +58,8 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
|
||||
|
||||
constructor(public formService: FormService,
|
||||
private dateAdapter: DateAdapter<DateFnsAdapter>,
|
||||
private userPreferencesService: UserPreferencesService) {
|
||||
private userPreferencesService: UserPreferencesService,
|
||||
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
|
||||
super(formService);
|
||||
}
|
||||
|
||||
@@ -67,25 +69,27 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
|
||||
|
||||
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
|
||||
|
||||
if (this.field) {
|
||||
if (this.field.dynamicDateRangeSelection) {
|
||||
const today = this.getTodaysFormattedDate();
|
||||
if (Number.isInteger(this.field.minDateRangeValue)) {
|
||||
this.minDate = format(subDays(today, this.field.minDateRangeValue), this.DATE_FORMAT);
|
||||
this.minDate = format(subDays(today, this.field.minDateRangeValue), DATE_FORMAT_CLOUD);
|
||||
this.field.minValue = this.minDate;
|
||||
}
|
||||
|
||||
if (Number.isInteger(this.field.maxDateRangeValue)) {
|
||||
this.maxDate = format(addDays(today, this.field.maxDateRangeValue), this.DATE_FORMAT);
|
||||
this.maxDate = format(addDays(today, this.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
|
||||
this.field.maxValue = this.maxDate;
|
||||
}
|
||||
} else {
|
||||
if (this.field.minValue) {
|
||||
this.minDate = format(new Date(this.field.minValue), this.DATE_FORMAT);
|
||||
this.minDate = format(new Date(this.field.minValue), DATE_FORMAT_CLOUD);
|
||||
}
|
||||
|
||||
if (this.field.maxValue) {
|
||||
this.maxDate = format(new Date(this.field.maxValue), this.DATE_FORMAT);
|
||||
this.maxDate = format(new Date(this.field.maxValue), DATE_FORMAT_CLOUD);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -103,7 +107,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
|
||||
onDateChanged(newDateValue) {
|
||||
const date = new Date(newDateValue);
|
||||
if (isValid(date)) {
|
||||
this.field.value = format(date, this.DATE_FORMAT);
|
||||
this.field.value = format(date, this.field.dateDisplayFormat);
|
||||
} else {
|
||||
this.field.value = newDateValue;
|
||||
}
|
||||
|
||||
@@ -15,4 +15,4 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export const DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
|
||||
export const DATE_FORMAT_CLOUD = 'yyyy-MM-dd';
|
||||
|
||||
Reference in New Issue
Block a user