feat(rep-create-form.component): Datumslokalisierung für Deutschland hinzugefügt

DigitalData.UserManager.API/ClientApp/user_manager_ui/package-lock.json

@@ -15,6 +15,7 @@
         "@angular/core": "^17.3.0",
         "@angular/forms": "^17.3.0",
         "@angular/material": "^17.3.10",
+        "@angular/material-moment-adapter": "^17.3.10",
         "@angular/platform-browser": "^17.3.0",
         "@angular/platform-browser-dynamic": "^17.3.0",
         "@angular/platform-server": "^17.3.0",
@@ -542,6 +543,19 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material-moment-adapter": {
+      "version": "17.3.10",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.3.10.tgz",
+      "integrity": "sha512-R68ssdGMSmVIfpOGaB9vjW5lBh6zH9GboBuaIAqizC/ZAzdEgpmT7qdr3PBCmRPTLTx8Yx9K3rhgRekO79ympw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^17.0.0 || ^18.0.0",
+        "@angular/material": "17.3.10",
+        "moment": "^2.18.1"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "17.3.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.11.tgz",
@@ -9453,6 +9467,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

DigitalData.UserManager.API/ClientApp/user_manager_ui/package.json

@@ -18,6 +18,7 @@
     "@angular/core": "^17.3.0",
     "@angular/forms": "^17.3.0",
     "@angular/material": "^17.3.10",
+    "@angular/material-moment-adapter": "^17.3.10",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/platform-server": "^17.3.0",

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/rep-create-form/rep-create-form.component.html

@@ -6,7 +6,7 @@
                 <input matStartDate formControlName="start" placeholder="Start date">
                 <input matEndDate formControlName="end" placeholder="End date">
             </mat-date-range-input>
-            <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
+            <mat-hint>{{dateFormatString()}}</mat-hint>
             <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
             <mat-date-range-picker #picker></mat-date-range-picker>
 

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/rep-create-form/rep-create-form.component.ts

@@ -1,26 +1,34 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, signal, OnInit, computed } from '@angular/core';
 import { UserRep } from '../../../models/user-management.api.models';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UserRepService } from '../../../services/api/user-representation.service';
 import { GroupUpdateFormComponent } from '../group-update-form/group-update-form.component';
 import { JsonPipe } from '@angular/common';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { provideNativeDateAdapter } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DateAdapter, MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import Swal from 'sweetalert2';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
+import { MatInputModule } from '@angular/material/input';
+import 'moment/locale/de';
 
 @Component({
   selector: 'app-rep-create-form',
   standalone: true,
-  providers: [provideNativeDateAdapter()],
-  imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe, MatButtonModule, MatIconModule],
+  providers: [
+    provideNativeDateAdapter(),
+    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
+    provideMomentDateAdapter()
+  ],
+  imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe, MatButtonModule, MatIconModule, MatInputModule],
   templateUrl: './rep-create-form.component.html',
-  styleUrl: './rep-create-form.component.scss'
+  styleUrl: './rep-create-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RepCreateFormComponent {
+export class RepCreateFormComponent implements OnInit {
 
   readonly userRep: UserRep;
   readonly afterCreation: (any: any) => any;
@@ -30,6 +38,9 @@ export class RepCreateFormComponent {
     start: new FormControl<Date | null>(null),
     end: new FormControl<Date | null>(null),
   });
+  private readonly _locale = signal(inject<unknown>(MAT_DATE_LOCALE));
+  private readonly _adapter = inject<DateAdapter<unknown, unknown>>(DateAdapter);
+  private readonly _intl = inject(MatDatepickerIntl);
 
   constructor() {
     const dialogData: { userRep: UserRep, afterCreation: (any: any) => any } = inject(MAT_DIALOG_DATA)
@@ -37,6 +48,23 @@ export class RepCreateFormComponent {
     this.afterCreation = dialogData.afterCreation;
   }
 
+  ngOnInit(): void {
+    //update close button label
+    this._intl.closeCalendarLabel = 'Kalender schließen';
+    this._intl.changes.next();
+
+    //set local
+    this._locale.set('de');
+    this._adapter.setLocale(this._locale());
+  }
+
+  readonly dateFormatString = computed(() => {
+    if (this._locale() === 'de-DE') {
+      return 'dd.mm.yyyy';
+    }
+    return '';
+  });
+
   create() {
     const validFrom = this.range.value.start;
     const validTo = this.range.value.end;
@@ -61,4 +89,4 @@ export class RepCreateFormComponent {
       }
     });
   }
-}
+}