added date picker to get date for data display for a specific date

index.html

@@ -31,6 +31,7 @@
     <script src="https://code.highcharts.com/modules/boost.js"></script>
     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
 
+
     <!-- Apexcharts lib -->
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <link rel="stylesheet" href="css/styles.css" />
@@ -70,6 +71,12 @@
                             Dashboard
                         </a>
                     </div>
+                    <form id="DatePicker">
+                        <label>Select Date:</label>
+                        <input type="date" id="DateOfInterest" name="DateOfInterest" min="2020-01-01" max="2020-12-31">
+                        <input type="submit" value="Submit">
+                    </form>
+                    <p>Date selected: <span id="DateSelected"></span> </p>
                 </div>
             </nav>
         </div>
@@ -131,6 +138,16 @@
             </footer>
         </div>
     </div>
+    <script>
+        document.getElementById('DatePicker').onsubmit = function() {
+            var dateSelected = document.getElementById('DateOfInterest').value;
+            var asDateType = new Date(dateSelected)
+            console.log(typeof(dateSelected));
+
+            document.getElementById('DateSelected').innerHTML = dateSelected;
+            return false;
+        };
+    </script>
 </body>
 
 </html>
\ No newline at end of file

index.js

 const express = require("express");
 
 const app = express();
+
 const port = process.env.PORT || 3000;
 
 app.use(express.static("public"));
 
 app.get("/", (req, res) => {
-  res.sendFile(__dirname + "/index.html");
+    res.sendFile(__dirname + "/index.html");
 });
 
 app.get("/index.html", (req, res) => {
-  res.redirect("/");
+    res.redirect("/");
 });
 
+
 app.listen(port, () => {
-  console.log(`App listening at localhost:${port}`);
-});
+    console.log(`App listening at localhost:${port}`);
+});
\ No newline at end of file