diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index ba09be82ca..3294099a58 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -14,6 +14,9 @@
     <script src="node_modules/material-design-lite/material.min.js"></script>
     <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
     <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
+          rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
 
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
@@ -35,6 +38,8 @@
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
     <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
+    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
 
     <!-- Polyfill(s) for dialogs -->
     <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index ace2ffc107..8029dde58b 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -60,7 +60,8 @@
       "rxjs": "5.0.0-beta.12",
       "systemjs": "0.19.27",
       "zone.js": "^0.6.23",
-
+      "md-date-time-picker": "^2.2.0",
+      "moment": "2.15.1",
       "material-design-icons": "2.2.3",
       "material-design-lite": "1.2.1",
       "ng2-translate": "2.5.0",