docs: replace third party datetime picker with native browser picker (#46)

The used third party datetime picker is not fully compatible with
Angular 16 and there are no signs that support will be added.

---------

Co-authored-by: Daniel Kimmich <json-derulo@users.noreply.github.com>

Author: json-derulo

package-lock.json

@@ -14,7 +14,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "^9.0.0",
     "@angular/animations": "^16.0.0",
     "@angular/cdk": "^16.0.0",
     "@angular/common": "^16.0.0",

package.json

@@ -0,0 +1,4 @@
+export const getDateString = (date?: Date): string => {
+  const newDate = date ? new Date(date) : new Date();
+  return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString().slice(0, -1).split('.')[0];
+};

projects/angular-intl-demo/src/app/pipes/date-utils.ts

@@ -1,9 +1,10 @@
 <div class="fields-container">
   <mat-form-field>
     <mat-label>Date</mat-label>
-    <input [(ngModel)]="selectedDate" [ngxMatDatetimePicker]="picker" matInput placeholder="Choose a date">
-    <mat-datepicker-toggle [for]="$any(picker)" matSuffix></mat-datepicker-toggle>
-    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
+    <input #picker [(ngModel)]="selectedDate" matInput placeholder="Choose a date" type="datetime-local">
+    <button (click)="picker.showPicker()" mat-icon-button matIconSuffix>
+      <mat-icon>today</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>

projects/angular-intl-demo/src/app/pipes/date/date.component.html

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {languages} from '../../languages';
+import {getDateString} from "../date-utils";
 
 @Component({
   selector: 'app-date',
@@ -8,7 +9,7 @@ import {languages} from '../../languages';
 })
 export class DateComponent {
   languages = languages;
-  selectedDate = new Date();
+  selectedDate = getDateString();
   dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
   timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
   hour12: Intl.DateTimeFormatOptions['hour12'];

projects/angular-intl-demo/src/app/pipes/date/date.component.ts

@@ -13,11 +13,11 @@ import {FormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {PipesRoutingModule} from "./pipes-routing.module";
 import {CountryComponent} from "./country/country.component";
-import {NgxMatDatetimePickerModule, NgxMatNativeDateModule} from "@angular-material-components/datetime-picker";
-import {MatDatepickerModule} from "@angular/material/datepicker";
 import {UnitComponent} from "./unit/unit.component";
 import {ListComponent} from "./list/list.component";
 import {RelativeTimeComponent} from './relative-time/relative-time.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
   declarations: [
@@ -40,9 +40,8 @@ import {RelativeTimeComponent} from './relative-time/relative-time.component';
     MatSelectModule,
     FormsModule,
     MatInputModule,
-    NgxMatDatetimePickerModule,
-    MatDatepickerModule,
-    NgxMatNativeDateModule,
+    MatButtonModule,
+    MatIconModule,
   ],
 })
 export class PipesModule {

projects/angular-intl-demo/src/app/pipes/pipes.module.ts

@@ -1,9 +1,10 @@
 <div class="fields-container">
   <mat-form-field>
     <mat-label>Date</mat-label>
-    <input [(ngModel)]="selectedDate" [ngxMatDatetimePicker]="picker" matInput placeholder="Choose a date">
-    <mat-datepicker-toggle [for]="$any(picker)" matSuffix></mat-datepicker-toggle>
-    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
+    <input #picker [(ngModel)]="selectedDate" matInput placeholder="Choose a date" type="datetime-local">
+    <button (click)="picker.showPicker()" mat-icon-button matIconSuffix>
+      <mat-icon>today</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>

projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html

@@ -1,14 +1,15 @@
 import {Component} from '@angular/core';
 import {IntlRelativeTimePipeOptions} from "projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe";
 import {languages} from "../../languages";
+import {getDateString} from "../date-utils";
 
 @Component({
   selector: 'app-relative-time',
   templateUrl: './relative-time.component.html',
   styleUrls: ['./relative-time.component.scss'],
 })
 export class RelativeTimeComponent {
-  selectedDate = new Date(new Date().getTime() - 60000);
+  selectedDate = getDateString(new Date(new Date().getTime() - 60000));
   languages = languages;
   numeric?: IntlRelativeTimePipeOptions['numeric'];
   style?: IntlRelativeTimePipeOptions['style'];