I am using javascript to use a date from one input-element (DATEINPUT) to populate the value of another input-element (DATEOUTPUT). Both input-elements are decorated with .md-form class and use the form-control-class themselves.

Expected behavior I would expect DATEOUTPUT to update automatically, as soon as the value is populated. Through console.log i can see that the value-attribute is actually populated.

Actual behavior DATEOUTPUT is only updated after clicking on the Input-element. The label moves up and the Input.value is shown

Resources (screenshots, code snippets etc.)

HTML-code

<div class="md-form"> <input id="startDate" type="date" value="" class="form-control" /> <label class="mdb-main-label">Startdatum</label> </div> <div class="md-form"> <input id="endDate" type="date" value="" class="form-control" /> <label class="mdb-main-label">EindDatum</label> </div>

Javascript-code

document.getElementById("startDate").addEventListener("change", setEndDate);

function setEndDate() {
    const DATEINPUT = document.getElementById('startDate');
    const DATEOUTPUT = document.getElementById('endDate');            

    var baseDate = DATEINPUT.valueAsDate;
    baseDate.setDate(baseDate.getDate() + 1);
    DATEOUTPUT.valueAsDate = baseDate;      

    console.log(baseDate, DATEOUTPUT);
}