working on the date select interface

covid.js

@@ -601,6 +601,7 @@ let getCovidData = () => {
                 var cleaned_data = siteData['Global'].data.slice(-1)[0]
                 cleaned_data.mortality = cleaned_data.deaths / cleaned_data.confirmed
                 console.log(`+-- got global covid data:`
+                        + `\n    date      : ${cleaned_data.date}`
                         + `\n    confirmed : ${cleaned_data.confirmed}`
                         + `\n    deaths    : ${cleaned_data.deaths}`
                         + `\n    recovered : ${cleaned_data.recovered}`
@@ -1398,14 +1399,24 @@ document.addEventListener('DOMContentLoaded', (e)=>{
             }
         })
     })
+    document.querySelector('input[type=date][name=chart-start-date]').addEventListener('click', (e)=>{
+        e.target.parentElement.click()
+    })
     
     // fill out the covid data box
     getCovidData()
         .then((data)=>{
+            // update global stats
             document.querySelector('#covid-stats > #confirmed > .value').innerHTML =  data.confirmed
             document.querySelector('#covid-stats > #deaths > .value').innerHTML =  data.deaths
             document.querySelector('#covid-stats > #recovered > .value').innerHTML =  data.recovered
             document.querySelector('#covid-stats > #mortality > .value').innerHTML =  "~" + Math.round(data.mortality * 10000) / 100 + '%'
+            
+            // update the interface
+            document.querySelector('input[type=date][name=chart-start-date]').min =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            document.querySelector('input[type=date][name=chart-start-date]').value =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            document.querySelector('input[type=date][name=chart-start-date]').max =  data.date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            
             for (site in sites) {
                 var cOpt = document.createElement("option");
                 cOpt.value = sites[site];

index.html

@@ -360,8 +360,8 @@
             </div>
             <div class="chart-config-group">
                 <p>Start</p>
-                <label for="chart-start-date">on: <input type="date" value="2020-01-01"/></label>
-                <p>, or from:</p>
+                <label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-03-22" min="2020-03-22"/></label>
+                <p>or from:</p>
                 <label for="chart-start-first">1st</label>
                 <label for="chart-start-tenth">10th</label>
                 <label for="chart-start-hundredth">100th</label>