Working with Native HTML Date Selector: <input type = "date">

If you are looking for a in-built date selection box, there is one that is native to html. It comes with html input tag. Just assign "date" to its type attribute, you are good to go.

One a date is selected on the input with type, date, its value is a string of the format "xxxx-xx-xx", year-month-day.  It's a string, so  if you want to play around with the date, you new to create a date object using the date string you get from the input value.

<input id="dateselector" oninput="getdate()" type="date" />
<script>
function getdate(){
    var date = document.getElementById('dateselector').value;
    var newdate = new Date(date);
    document.getElementById('showdate').innerHTML = date;
}
</script>

<input id="dateselector" oninput="getdate()" type="date" />
<script>
 function getdate(){
    var date = document.getElementById('dateselector').value;
    var newdate = new Date(date);
    document.getElementById('showdatenumber').innerHTML = newdate;
  }
</script>

<input id="dateselector" oninput="getdate()" type="date" />
<script>
 function getdate(){
    var date = document.getElementById('dateselector').value;
    var newdate = new Date(date);
    document.getElementById('showdatenumber').innerHTML = newdate.getFullYear();
  }
</script>

You can also claculate how many days are between two dates

<input id="dateselector_a" type="date" />
<input id="dateselector_b" type="date" />
<button onclick="getduration()">Get Duration</button>
<div id = "howmanydays"><div>
<script>
 function getduration0112(){
    var date1 = document.getElementById('dateselector_a').value;
    var date2 = document.getElementById('dateselector_b').value;
    var newdate1 = new Date(date1);
    var newdate2 = new Date(date2);
   document.getElementById('howmanydays').innerHTML = (newdate2-newdate1)/86400000 + " days.";
 }
</script>

You can use addtion or substraction with date objecst, and the units are in milliseconds. The divition of 86400000 is how many milliseconds are in one day which is 60 (seconds) *60 (minutes) *24 (hoyrs) *1000(milliseconds).

Use Date Selector with Date

If we want to work with data, like an array of objects where date is one data entry. The input formats for the dates should be in the same form as what the date selector (<input type = "date">) returns so that we can query through the data using things like somearray.find(somefunction) to find the target object with the target date. 

Select a date between 2022/1/14 to 1/16 to find artificial sp500 index value.

<input oninput="sp500indexprice.innerHTML = sp500indexedata.find(x=>{return this.value == x.date}).price" type="date" />
<div id="sp500indexprice"></div>
<script>
 var sp500indexedata = [
    {
    	date:"2022-01-14",
      	price:4400
    },
    {
   	    date:"2022-01-15",
   	   	price:4410
    },
    {
        date:"2022-01-16",
      	price:4420
    }
  ];
</script>

One interesting thing is that array.find(returning a n object) can be chained, which is in some way conveient.

Setting the Earliest and Latest Dates to Choose

You can also specify which date is the earliest or latest dates that can be chosen by setting the min and max attributes for the input. The format for the min and the max are not number, but string, such as this one.

<input type = "date" min = "2022-01-14" max = "2022-01-17">