I have tried implementing this in various ways. but <mdb-date-picker> is a bit broken on firefox.

The issue: the datepicker modal will open when you press the mouse button on the input and will disappear as soon as you release the mouse button.

The datepicker modal will stay open if i right click on the input. but the normal click is broken.

Works perfectly fine in Chrome and Opera.

"dependencies": {
  "@angular/animations": "^5.0.0",
  "@angular/common": "^5.0.0",
  "@angular/compiler": "^5.0.0",
  "@angular/core": "^5.0.0",
  "@angular/forms": "^5.0.0",
  "@angular/http": "^5.0.0",
  "@angular/platform-browser": "^5.0.0",
  "@angular/platform-browser-dynamic": "^5.0.0",
  "@angular/router": "^5.0.0",
  "chart.js": "^2.5.0",
  "core-js": "^2.4.1",
  "easy-pie-chart": "^2.1.7",
  "font-awesome": "^4.7.0",
  "hammerjs": "^2.0.8",
  "ng-mdb-pro": "git+https://oauth2:{{key}}@git.mdbootstrap.com/mdb/angular/ng-pro.git",
  "ng2-cookies": "^1.0.12",
  "rxjs": "^5.5.2",
  "screenfull": "3.3.0",
  "zone.js": "^0.8.14",
  "angular2-flash-messages": "^1.0.8",
  "ng2-inline-editor": "^0.1.1-alpha.20"
}

"devDependencies": {
  "@angular/cli": "1.5.4",
  "@angular/compiler-cli": "^5.0.0",
  "@angular/language-service": "^5.0.0",
  "@types/jasmine": "~2.5.53",
  "@types/jasminewd2": "~2.0.2",
  "@types/node": "~6.0.60",
  "codelyzer": "^4.0.1",
  "jasmine-core": "~2.6.2",
  "jasmine-spec-reporter": "~4.1.0",
  "karma": "~1.7.0",
  "karma-chrome-launcher": "~2.1.1",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.1.2",
  "ts-node": "~3.2.0",
  "tslint": "~5.7.0",
  "typescript": "~2.4.2"
}

This is broken on firefox version 57.0 .
OS: Windows 10 build 15063