[ADF-2849] Search Date Range - Set the format of the date from config (#3288)

* format date chosen from the datePicker's calendar

* format date on focusout event

* fix tests & some code refactoring

* more validation messages

* unit tests

* fix typecast error

* move "dateFormat" to be part of the "date range" widget settings block

* fix error on Moment

"...Type 'moment.Moment' is not assignable to type 'moment.Moment'. Two different types with this name exist, but they are unrelated.
          Property 'isLocal' is missing in type 'Moment'..."

* moment - use old version

* change script - use recent version of moment

lib/content-services/search/components/search-date-range/search-date-range.component.ts

@@ -17,16 +17,44 @@
 
 import { OnInit, Component, ViewEncapsulation } from '@angular/core';
 import { FormControl, Validators, FormGroup } from '@angular/forms';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
+
 import { SearchWidget } from '../../search-widget.interface';
 import { SearchWidgetSettings } from '../../search-widget-settings.interface';
 import { SearchQueryBuilderService } from '../../search-query-builder.service';
 import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
-import moment from 'moment-es6';
+import { Moment } from 'moment';
+import { UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
+
+declare let moment: any;
+
+const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
+
+export class CustomMomentDateAdapter extends MomentDateAdapter {
+    customDateFormat: string;
+
+    parse(value: any, parseFormat: any): any {
+        const dateFormat = this.customDateFormat ? this.customDateFormat : DEFAULT_FORMAT_DATE;
+
+        return super.parse(value, dateFormat);
+    }
+
+    format(value: Moment, displayFormat: string): string {
+        const dateFormat = this.customDateFormat ? this.customDateFormat : DEFAULT_FORMAT_DATE;
+
+        return super.format(value, dateFormat);
+    }
+}
 
 @Component({
     selector: 'adf-search-date-range',
     templateUrl: './search-date-range.component.html',
     styleUrls: ['./search-date-range.component.scss'],
+    providers: [
+        {provide: DateAdapter, useClass: CustomMomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}
+    ],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-date-range' }
 })
@@ -42,8 +70,23 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
     settings?: SearchWidgetSettings;
     context?: SearchQueryBuilderService;
     maxFrom: any;
+    datePickerDateFormat = DEFAULT_FORMAT_DATE;
+
+    constructor(private dateAdapter: DateAdapter<Moment>,
+                private userPreferencesService: UserPreferencesService) {
+    }
 
     ngOnInit() {
+        if (this.settings) {
+            this.datePickerDateFormat = this.settings.dateFormat || DEFAULT_FORMAT_DATE;
+        }
+        const theCustomDateAdapter = <CustomMomentDateAdapter> <any> this.dateAdapter;
+        theCustomDateAdapter.customDateFormat = this.datePickerDateFormat;
+
+        this.userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.setLocale(locale);
+        });
+
         const validators = Validators.compose([
             Validators.required
         ]);
@@ -80,13 +123,20 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
         }
     }
 
-    hasSelectedDays(from: string, to: string): boolean {
-        if (from && to) {
-            const start = moment(from).startOf('day');
-            const end = moment(to).endOf('day');
+    onChangedHandler(event: any, formControl) {
+        const inputValue = event.srcElement.value;
 
-            return start.isBefore(end);
+        if (inputValue) {
+            const formatDate = moment(inputValue, this.datePickerDateFormat);
+
+            if (formatDate.isValid()) {
+                formControl.setValue(formatDate);
+            }
         }
-        return true;
+    }
+
+    setLocale(locale) {
+        this.dateAdapter.setLocale(locale);
+        moment.locale(locale);
     }
 }