AppStd/DigitalData.UserManager
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Developer 02
2024-11-08 14:28:22 +01:00
parent 114995d274
commit 31c8249516
4 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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 {
}
});
}
}
}