Topic: md-form class with input-element does not refresh when js-script updates value

vonmonckl free asked 3 years ago

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.)


<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>


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);

Piotr Urbaniak free answered 3 years ago

Hello vonmoncki,
if I remember correctly it was a bug. Please download the latest MDB Version 4.19.2 which contains the fix for this bug.
Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.0
  • Device: Desktop
  • Browser: Chrome, FireFox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No