diff --git a/package-lock.json b/package-lock.json
index 1db3e84..60e934e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -446,6 +446,14 @@
         "tslib": "^1.7.1"
       }
     },
+    "@angular/material-moment-adapter": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-8.2.1.tgz",
+      "integrity": "sha512-N8syD+aI83oLEs7T1qD/wXv2UT2bQkKGEcvm/xenE9u3PP3rj1/O82l6X9kx4PiNLxs+IkS9EqEYQVGv6Z4/AA==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.0.0.tgz",
@@ -6953,6 +6961,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "mongodb": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.2.7.tgz",
diff --git a/package.json b/package.json
index 7d943c6..055db5b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/core": "~8.0.0",
     "@angular/forms": "~8.0.0",
     "@angular/material": "^8.0.0",
+    "@angular/material-moment-adapter": "^8.2.1",
     "@angular/platform-browser": "~8.0.0",
     "@angular/platform-browser-dynamic": "~8.0.0",
     "@angular/pwa": "^0.803.6",
@@ -32,13 +33,14 @@
     "hammerjs": "^2.0.8",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "mongoose": "^5.6.9",
     "mongoose-unique-validator": "^2.0.3",
     "ngx-push-notifications": "^7.0.2",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
-    "zone.js": "~0.9.1",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.1.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.800.0",
diff --git a/src/app/challenge-new/challenge-new.component.html b/src/app/challenge-new/challenge-new.component.html
index 35918cf..9bc0fa1 100644
--- a/src/app/challenge-new/challenge-new.component.html
+++ b/src/app/challenge-new/challenge-new.component.html
@@ -9,10 +9,9 @@ <h1 class='mat-heading'>New Challenge - {{name}}</h1>
       <input matInput type="text" placeholder="Message" ngModel name="message" #message="ngModel" required>
     </mat-form-field><br>
     <mat-form-field>
-      <input matInput [min]="minDate" readonly="true" [matDatepicker]="picker" placeholder="Choose a date" name="date"
-        ngModel #date="ngModel" required>
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-datepicker touchUi #picker></mat-datepicker>
+      <input matInput [min]="minDate" [matDatepicker]="dp" readonly="true" placeholder="Date" [formControl]="date">
+      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+      <mat-datepicker #dp></mat-datepicker>
     </mat-form-field><br>
     <mat-form-field>
       <input matInput atp-time-picker readonly="true" placeholder="Time" name="time" ngModel #time="ngModel" required
diff --git a/src/app/challenge-new/challenge-new.component.ts b/src/app/challenge-new/challenge-new.component.ts
index b9a84a5..55ebcce 100644
--- a/src/app/challenge-new/challenge-new.component.ts
+++ b/src/app/challenge-new/challenge-new.component.ts
@@ -1,16 +1,42 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { NgForm } from '@angular/forms';
+import { NgForm, FormControl } from '@angular/forms';
 import { LadderService } from '../app.service';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+import * as _moment from 'moment';
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'DD/MM/YYYY',
+  },
+  display: {
+    dateInput: 'DD/MM/YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'DD MM YYYY',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
 
 @Component({
   selector: 'app-challenge-new',
   templateUrl: './challenge-new.component.html',
-  styleUrls: ['./challenge-new.component.css']
+  styleUrls: ['./challenge-new.component.css'],
+  providers: [
+    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
+    // application's root module. We provide it at the component level here, due to limitations of
+    // our example generation script.
+    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+  ],
 })
 
 export class ChallengeNewComponent implements OnInit, OnDestroy {
 
+  date = new FormControl();
   id: string;
   name: string;
   sport: string;
@@ -48,13 +74,26 @@ export class ChallengeNewComponent implements OnInit, OnDestroy {
     if (form.invalid) {
       return;
     }
+    let date = this.date.value._d.getDate();
+    let month = String(Number(this.date.value._d.getMonth()) + 1);
+    const year = this.date.value._d.getFullYear();
+
+    if (Number(date) < 10) {
+      date = '0' + date;
+    }
+    if (Number(month) < 10) {
+      month = '0' + month;
+    }
+
+    const dateFinal = date + '/' + month + '/' + year;
+
     this.service.addChallenge(
       this.id,
       localStorage.getItem('_id'),
       this.name,
       localStorage.getItem('name'),
       this.sport1,
-      (form.value.date.getDate() + '/' + (form.value.date.getMonth() + 1) + '/' + form.value.date.getFullYear()),
+      dateFinal,
       form.value.time,
       form.value.message
     );