diff --git a/package-lock.json b/package-lock.json
index e337996..f7b36b7 100644
--- 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",
diff --git a/package.json b/package.json
index 491186d..72fe759 100644
--- 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"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c705303..f26ae28 100644
--- 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 { }
diff --git a/src/app/material/material.module.ts b/src/app/material/material.module.ts
index 167510a..8903195 100644
--- 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
   ]
 })
diff --git a/src/app/views/travel-form/travel-form.component.html b/src/app/views/travel-form/travel-form.component.html
index 5f14ca7..087edce 100644
--- 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">
diff --git a/src/app/views/travel-form/travel-form.component.ts b/src/app/views/travel-form/travel-form.component.ts
index ea69007..343aacc 100644
--- 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() { }