diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts
index 87be577e0..a4d1de86f 100644
--- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts
+++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts
@@ -29,8 +29,8 @@ export class TimeRangeFormComponent implements OnInit {
 
   setInitialDataOnScreen() {
     this.reportForm.setValue({
-      startDate: formatDate(moment().startOf('week').toString(), DATE_FORMAT, 'en'),
-      endDate: formatDate(moment().endOf('week').toString(), DATE_FORMAT, 'en')
+      startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'),
+      endDate: formatDate(moment().endOf('week').format('l'), DATE_FORMAT, 'en')
     });
     this.onSubmit();
   }
diff --git a/src/app/modules/shared/components/input-date/input-date.component.html b/src/app/modules/shared/components/input-date/input-date.component.html
index 7cc0731c2..1eaf0a384 100644
--- a/src/app/modules/shared/components/input-date/input-date.component.html
+++ b/src/app/modules/shared/components/input-date/input-date.component.html
@@ -1,10 +1,12 @@
 <input
   [value]="value"
   [disabled]="isDisabled"
-  (input)="onInput($event.target.value)"
-  type="date"
+  (dateInput)="onInput($event.target.value)"
   class="form-control"
   aria-label="Small"
   aria-describedby="inputGroup-sizing-sm"
   required="required"
+  [matDatepicker]="datepicker"
+  (click)="openOrCloseDatePicker(datepicker)"
 />
+<mat-datepicker #datepicker ></mat-datepicker>
diff --git a/src/app/modules/shared/components/input-date/input-date.component.spec.ts b/src/app/modules/shared/components/input-date/input-date.component.spec.ts
index fe0662d49..bf8e50de0 100644
--- a/src/app/modules/shared/components/input-date/input-date.component.spec.ts
+++ b/src/app/modules/shared/components/input-date/input-date.component.spec.ts
@@ -1,16 +1,23 @@
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {InputDateComponent} from './input-date.component';
+import { waitForAsync, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { InputDateComponent } from './input-date.component';
+import * as moment from 'moment';
 
 describe('InputDateComponent', () => {
   let component: InputDateComponent;
   let fixture: ComponentFixture<InputDateComponent>;
   let input;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [InputDateComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [InputDateComponent],
+        imports: [MatInputModule, MatDatepickerModule, MatMomentDateModule],
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InputDateComponent);
@@ -25,7 +32,7 @@ describe('InputDateComponent', () => {
   });
 
   it('should insert the provided text into the component', fakeAsync(() => {
-    setInputValue('input', '2020-05-20');
+    setInputValue('input', moment('2020-05-20').format('l'));
 
     expect(component.value).toEqual('2020-05-20');
   }));
diff --git a/src/app/modules/shared/components/input-date/input-date.component.ts b/src/app/modules/shared/components/input-date/input-date.component.ts
index b76072bd8..e81c1b221 100644
--- a/src/app/modules/shared/components/input-date/input-date.component.ts
+++ b/src/app/modules/shared/components/input-date/input-date.component.ts
@@ -1,5 +1,8 @@
 import {Component, forwardRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { MatDatepicker } from '@angular/material/datepicker';
+import { DATE_FORMAT_YEAR } from 'src/environments/environment';
+import * as moment from 'moment';
 
 @Component({
   selector: 'app-input-date',
@@ -22,8 +25,8 @@ export class InputDateComponent implements ControlValueAccessor {
   constructor() {
   }
 
-  onInput(value: string) {
-    this.value = value;
+  onInput(value: moment.Moment) {
+    this.value = value.format(DATE_FORMAT_YEAR);
     this.onTouch();
     this.onChange(this.value);
   }
@@ -47,4 +50,8 @@ export class InputDateComponent implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void {
     this.isDisabled = isDisabled;
   }
+
+  openOrCloseDatePicker(datepicker: MatDatepicker<Date>): void {
+    return datepicker.opened ? datepicker.close() : datepicker.open();
+  }
 }