diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9b5aea5..66ada3a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,11 +15,13 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" @@ -1196,6 +1198,19 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/material": "17.2.2", + "moment": "^2.18.1" + } + }, "node_modules/@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -14815,6 +14830,14 @@ "node": ">=10" } }, + "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==", + "engines": { + "node": "*" + } + }, "node_modules/mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", @@ -20054,6 +20077,14 @@ "tslib": "^2.3.0" } }, + "@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "requires": { + "tslib": "^2.3.0" + } + }, "@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -30138,6 +30169,11 @@ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index fd32026..43942da 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,11 +21,13 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 66ecb37..651c4be 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -20,7 +20,7 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; -import { StudentRegisterComponent } from './components/students/student-register/student-register.component'; +import {MY_DATE_FORMAT, StudentRegisterComponent} from './components/students/student-register/student-register.component'; import { MatStepperModule } from '@angular/material/stepper'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; @@ -29,6 +29,8 @@ import { MatSelectModule } from '@angular/material/select'; import { MatIconModule } from '@angular/material/icon'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; +import { MomentDateAdapter } from '@angular/material-moment-adapter'; @NgModule({ declarations: [ @@ -67,7 +69,10 @@ import { MatTooltipModule } from '@angular/material/tooltip'; MatTooltipModule, MatIconModule, ], - providers: [], + providers: [ + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, + { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT } + ], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index 1f54df0..97199fb 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -6,7 +6,7 @@
- Personal Information + Persönliche Informationen
Name @@ -18,7 +18,7 @@ - Surname + Nachname - Birthdate + Geburtstag - MM/DD/YYYY + MM.DD.YYYY @@ -43,44 +43,44 @@ - Gender + Geschlecht - Male - Female - Divers + männlich + weiblich + divers
- Address + Adresse - Postal Code + Postleitzahl - Phone + Telefon E-Mail - Invalid E-Mail Address + Ungültige E-Mail Adresse
- +
@@ -128,12 +128,12 @@
- +
@@ -168,13 +168,13 @@
- +
diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index f47cada..7566a58 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -1,6 +1,16 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +export const MY_DATE_FORMAT= { + parse: { + dateInput: 'DD.MM.YYYY' + }, + display: { + dateInput: 'DD.MM.YYYY' + } +}; + @Component({ selector: 'li-student-register', templateUrl: './student-register.component.html',