diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts index 86ce7d7adb..dbe96a15ec 100644 --- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts +++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts @@ -15,12 +15,11 @@ * limitations under the License. */ -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; -import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core'; import { - MOMENT_DATE_FORMATS, - MomentDateAdapter, + DateFnsUtils, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core'; @@ -29,26 +28,22 @@ import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher'; -import { Moment } from 'moment'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { endOfDay, endOfToday, format, isBefore, isValid, startOfDay } from 'date-fns'; +import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter'; export interface DateRangeValue { from: string; to: string; } - -declare let moment: any; - -const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY'; - @Component({ selector: 'adf-search-date-range', templateUrl: './search-date-range.component.html', styleUrls: ['./search-date-range.component.scss'], providers: [ - { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, - { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS } + { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] }, + { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS } ], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-date-range' } @@ -74,8 +69,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy private onDestroy$ = new Subject(); - constructor(private dateAdapter: DateAdapter, - private userPreferencesService: UserPreferencesService) { + constructor(private dateAdapter: DateAdapter, + private userPreferencesService: UserPreferencesService, + @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) { } getFromValidationMessage(): string { @@ -94,10 +90,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } ngOnInit() { - this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE; - - const customDateAdapter = this.dateAdapter as MomentDateAdapter; - customDateAdapter.overrideDisplayFormat = this.datePickerFormat; + this.datePickerFormat = 'dd-MMM-yy'; + this.dateFormatConfig.display.dateInput = this.datePickerFormat; this.userPreferencesService .select(UserPreferenceValues.Locale) @@ -110,9 +104,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy if (this.settings && this.settings.maxDate) { if (this.settings.maxDate === 'today') { - this.maxDate = this.dateAdapter.today().endOf('day'); + this.maxDate = endOfToday(); } else { - this.maxDate = moment(this.settings.maxDate).endOf('day'); + this.maxDate = endOfDay(new Date(this.settings.maxDate)); } } @@ -141,12 +135,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy this.onDestroy$.complete(); } - apply(model: { from: string; to: string }, isValid: boolean) { - if (isValid && this.id && this.context && this.settings && this.settings.field) { + apply(model: { from: string; to: string }, isFormValid: boolean) { + if (isFormValid && this.id && this.context && this.settings && this.settings.field) { this.isActive = true; - const start = moment(model.from).startOf('day').format(); - const end = moment(model.to).endOf('day').format(); + const start = format(startOfDay(new Date(model.from)), `yyyy-MM-dd'T'HH:mm:ssxx`); + const end = format(endOfDay(new Date(model.to)), `yyyy-MM-dd'T'HH:mm:ssxx`); this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`; @@ -222,7 +216,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy const inputValue = event.value; const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat); - if (formatDate && formatDate.isValid()) { + if (formatDate && isValid(formatDate)) { formControl.setValue(formatDate); } else if (formatDate) { formControl.setErrors({ @@ -234,8 +228,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } setLocale(locale) { - this.dateAdapter.setLocale(locale); - moment.locale(locale); + this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)); } hasParseError(formControl): boolean { @@ -247,6 +240,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy } setFromMaxDate() { - this.fromMaxDate = (!this.to.value || this.maxDate && (moment(this.maxDate).isBefore(this.to.value))) ? this.maxDate : moment(this.to.value); + this.fromMaxDate = (!this.to.value || this.maxDate && (isBefore(this.maxDate, this.to.value))) ? this.maxDate : this.to.value; } }