Getting the correct date from an HTML date picker using javascript

Question

I am trying to add days to an HTML date picker using only javascript. The problem is the date returned from the HTML date picker is not always correct. I believe this is because the HTML date picker does not include a time or time zone. If I use the HTML datetime-local input, everything works. But I would much prefer to just use the input type date. This is the closest I have been able to get. It works for every day of the year I've tested except the first day of the month of any month. In the console.log the Open date is the value of the date picker minus 1 day with a default time of 20:00:00 GMT -0400. The end goal, I need to be able to add days to the date from an HTML date picker. The code correctly adds the number of days, but I can't get the correct starting date.

echo "
            <tr>
                <td id='description".$lineID."'>".$row["description"]."</td>
                <td id='recieveDate".$lineID."'>".$row["receivedate"]."</td>
                <td id='lotnumber".$lineID."'>".$row["lotnumber"]."</td>
                <td id='openStability".$lineID."' name='openStability'>".$row["openexpdays"]."</td>
                <td><input type='date' id='openDate".$lineID."' name='openDate' onChange='calExpDate(this)'></td>
                <td><input type='number' style='width:35px;' id='amount".$lineID."'></td>
                <td><input type='date' id='openExpDate".$lineID."' name='openExpDate'></td>
                
                
                <td><button type='button' id='".$lineID."' value='".$lineID."' onClick='insertRow()'>A</button></td>
                
            </tr>";


<script>      
    function calExpDate(x) {
     
        var rowIndex = x.parentNode.parentNode.rowIndex;
        var stability = parseInt(supplyTable.rows[rowIndex].cells[3].innerHTML);
        
        rowIndex = rowIndex - 1;
        
        var openDate = new Date(document.getElementById('openDate' + rowIndex).value);
            console.log("Open Date: " + openDate);
        
        openDate.setDate(openDate.getUTCDate());
            console.log("Open Date UTC: " + openDate);

        var expDate = new Date(openDate.getFullYear(),openDate.getMonth(),openDate.getDate() + stability);
        
        document.getElementById('openExpDate' + rowIndex).valueAsDate = expDate;
            console.log('Exp Date: ' + expDate);
    }
</script>

Post code as a runnable snippet, reduced to the minimum required to demonstrate the issue. Given the result is -0400 (which is likely your local timezone offset), then most likely your issue is that the value from the date input is in YYYY-MM-DD format, which is parsed by the built–in parser as UTC, not local (a bad decision by TC39 some years ago). See [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — RobG, Apr 26 '21 at 01:35
Thank you for this reference. It provided the exact solution I needed. — SRichardson01007, Apr 26 '21 at 22:17

score 0 · Answer 1 · answered Apr 25 '21 at 17:24

Input Date value Property

Set a date for a date field: getElementById("myDate"). value = "2014-02-09";
Get the date of a date field: var x = document. getElementById("myDate"). value;
An example that shows the difference between the defaultValue and value property: getElementById("myDate"); var defaultVal = x. defaultValue; var currentVal = x.

Getting the correct date from an HTML date picker using javascript

1 Answers1