DateTimePicker added

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 { }

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
   ]
 })

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

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() { }