DateTimePicker added

2021-01-31 00:57:43 +01:00
parent c8345e31bd
commit 51646ca311
6 changed files with 71 additions and 24 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -244,6 +244,36 @@
        }
      }
    },
+    "@angular-material-components/datetime-picker": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-5.0.3.tgz",
+      "integrity": "sha512-MY6BshW8Z46d1kKD9adiqPYmDRWnM2kIrqwGANi9O8h4EYjhlfLlC/+DSBXKCN45eo0L8GVrGLxGWvvLro/J7A==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "@angular-material-components/moment-adapter": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/moment-adapter/-/moment-adapter-5.0.0.tgz",
+      "integrity": "sha512-/9+8b4hpe8GwlgbuXAckDg5ZKms6yDWRKQcyXYuNKC+8Ya6M0M5NHYz3d4YXjJ73xOGURr73NlqZzYsknjYkUQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
    "@angular/animations": {
      "version": "11.1.1",
      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.1.1.tgz",
@@ -260,9 +290,9 @@
      }
    },
    "@angular/cdk": {
-      "version": "10.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.7.tgz",
-      "integrity": "sha512-ZQjDfTRTn7JuAKsf3jiIdU2XBaxxGBi/ZWYv5Pb3HCl6B4PISsIE5VWRhkoUogoAB0MiFHpjnWeIqknJEm11YQ==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.1.tgz",
+      "integrity": "sha512-rIog+eqv6RtpSWKM+iHQ5oHyOALMxRXkeTiJyvPfBCYQ2hzPN16+eNxP/JOR+C4y7pMaJyPur0pC572IZEnCsw==",
      "requires": {
        "parse5": "^5.0.0",
        "tslib": "^2.0.0"
@@ -599,9 +629,9 @@
      }
    },
    "@angular/material": {
-      "version": "10.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.7.tgz",
-      "integrity": "sha512-uk6JkRrKHaM9VFMzX7pWC83YNLVgXPB3D8U1yjSOafCdWwrRZgUHGr8MPlSILCr3o2nxgg5SsKdWcWwHuXXUZA==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.1.tgz",
+      "integrity": "sha512-atQyGG1/Xz1Q4udmQ7HWOYCAl14evL29EWhsrk4q/5OAumqKMEcJI4Ro/Pgn0N31HpsT2zHyDsPYe0bnjy+/Ww==",
      "requires": {
        "tslib": "^2.0.0"
      },
@@ -8142,6 +8172,11 @@
        "minimist": "^1.2.5"
      }
    },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
    "move-concurrently": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -11,17 +11,20 @@
  },
  "private": true,
  "dependencies": {
+    "@angular-material-components/datetime-picker": "^5.0.3",
+    "@angular-material-components/moment-adapter": "^5.0.0",
    "@angular/animations": "~11.1.1",
-    "@angular/cdk": "^10.2.7",
+    "@angular/cdk": "^11.1.1",
    "@angular/common": "~11.1.1",
    "@angular/compiler": "~11.1.1",
    "@angular/core": "~11.1.1",
    "@angular/forms": "~11.1.1",
-    "@angular/material": "^10.2.7",
+    "@angular/material": "^11.1.1",
    "@angular/platform-browser": "~11.1.1",
    "@angular/platform-browser-dynamic": "~11.1.1",
    "@angular/router": "~11.1.1",
    "angular-oauth2-oidc": "^9.2.2",
+    "moment": "^2.29.1",
    "rxjs": "~6.6.0",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.2"
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,12 +5,13 @@ import { OAuthModule } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, ExtraOptions } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';

 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 import { USER_API_URL, TRAVEL_API_URL } from './app.config';
 import { SharedModule } from './shared/shared.module';
-import { useHash } from '../flags';
+// import { useHash } from '../flags';
 import { MaterialModule } from './material/material.module';

 import { HomeComponent } from './pages/home/home.component';
@@ -21,23 +22,13 @@ import { HeaderComponent } from './views/header/header.component';
 import { ListComponent } from './views/list/list.component';
 import { TravelFormComponent } from './views/travel-form/travel-form.component';
 import { NewTravelComponent } from './pages/new-travel/new-travel.component';
-
-const ROUTING_OPTIONS: ExtraOptions = {
-    // preloadingStrategy: CustomPreloadingStrategy,
-    useHash,
-    initialNavigation: !useHash,
-    relativeLinkResolution: 'legacy'
-}{
-    // preloadingStrategy: CustomPreloadingStrategy,
-    useHash,
-    initialNavigation: !useHash,
-    relativeLinkResolution: 'legacy'
-};
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';

@NgModule({
  imports: [
    BrowserModule,
-    RouterModule.forRoot(APP_ROUTES, ROUTING_OPTIONS),
+    RouterModule.forRoot(APP_ROUTES),
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
@@ -50,6 +41,9 @@ const ROUTING_OPTIONS: ExtraOptions = {
    }),
    BrowserAnimationsModule,
    MaterialModule,
+    MatDatepickerModule,
+    NgxMatDatetimePickerModule,
+    NgxMatMomentModule
  ],
  declarations: [
    AppComponent,
@@ -69,4 +63,4 @@ const ROUTING_OPTIONS: ExtraOptions = {
  ],
  bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }
--- a/src/app/material/material.module.ts
+++ b/src/app/material/material.module.ts
@@ -9,6 +9,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDatepickerModule } from '@angular/material/datepicker';


@NgModule({
@@ -22,6 +23,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
+    MatDatepickerModule,
    MatProgressSpinnerModule
  ],
  exports: [
@@ -33,6 +35,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
+    MatDatepickerModule,
    MatProgressSpinnerModule
  ]
 })
--- a/src/app/views/travel-form/travel-form.component.html
+++ b/src/app/views/travel-form/travel-form.component.html
@@ -1,4 +1,16 @@
 <form (ngSubmit)="onSubmit()" #travelForm="ngForm">
+    <div>
+        <label for="departureDate">Fecha de salida</label>
+        <input matInput id="departureDate" name="departureDate" [ngxMatDatetimePicker]="picker"
+            placeholder="Choose a date" [min]="minDate" [(ngModel)]="travel.departureDate" #departureDate="ngModel">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <ngx-mat-datetime-picker #picker [showSeconds]="false" [stepMinute]="15">
+        </ngx-mat-datetime-picker>
+        <div [hidden]="departureDate.valid || departureDate.pristine" class="alert alert-danger">
+            La fecha es obligatoria
+        </div>
+    </div>
+
    <div>
        <label for="origin">Origen</label>
        <input type="text" id="origin" required [(ngModel)]="travel.origin" name="origin" #origin="ngModel">
@@ -31,7 +43,6 @@
    </div>


-
    <!-- <div>
        <label for="power">Hero Power</label>
        <select id="power" required [(ngModel)]="model.power" name="power" #power="ngModel">
--- a/src/app/views/travel-form/travel-form.component.ts
+++ b/src/app/views/travel-form/travel-form.component.ts
@@ -9,6 +9,7 @@ import { Travel } from 'src/app/entities/travel';
 export class TravelFormComponent implements OnInit {
  @Input() travel: Travel;
  submitted = false;
+  minDate = new Date();

  constructor() { }