Merge pull request #7092 from ArtemDzhereleiko/AD/bug-fix/date-time-picker

[3.4.2] UI: Fixed DatetimeAdapter for 'en-GB' locale

ui-ngx/src/app/shared/adapter/custom-datatime-adapter.ts

@@ -0,0 +1,36 @@
+///
+/// Copyright © 2016-2022 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { NativeDatetimeAdapter } from '@mat-datetimepicker/core';
+
+@Injectable()
+export class CustomDateAdapter extends NativeDatetimeAdapter {
+
+  parse(value: string | number): Date {
+    if (typeof value === 'number') {
+      return new Date(value);
+    }
+    let newDate = value;
+    const formatToParts = Intl.DateTimeFormat(this.locale).formatToParts();
+    if (formatToParts[0].type.toLowerCase() === 'day') {
+      const literal = formatToParts[1].value;
+      newDate = newDate.replace(new RegExp(`(\\d+[${literal}])(\\d+[${literal}])`), '$2$1');
+    }
+    return newDate ? new Date(Date.parse(newDate)) : null;
+  }
+
+}

ui-ngx/src/app/shared/shared.module.ts

@@ -53,7 +53,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatListModule } from '@angular/material/list';
-import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
+import { DatetimeAdapter, MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import { GridsterModule } from 'angular-gridster2';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -165,6 +165,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MultipleImageInputComponent } from '@shared/components/multiple-image-input.component';
 import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autocomplete.component';
 import { PhoneInputComponent } from '@shared/components/phone-input.component';
+import { CustomDateAdapter } from '@shared/adapter/custom-datatime-adapter';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -188,6 +189,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
       provide: MAT_DATE_LOCALE,
       useValue: 'en-GB'
     },
+    { provide: DatetimeAdapter, useClass: CustomDateAdapter },
     { provide: HELP_MARKDOWN_COMPONENT_TOKEN, useValue: HelpMarkdownComponent },
     { provide: SHARED_MODULE_TOKEN, useValue: SharedModule },
     TbPopoverService