How To Select Open Date Picker? Queryselector("#datepicker-container .open .datepicker-date-display") Does Not Work

I have two Materialize datepickers used

https://jsfiddle.net/Showrin/usp84k21/1/

onOpen: function() {
  document.querySelectorAll("#datepicker-container .datepicker-date- 
display").forEach(container => {
    container.innerHTML = `<span class="date-text">${this.el.value}</span>`;
  })
}

Actually, querySelector grabs only the first element. That's why the second element was not changed. Use querySelectorAll. It'll solve the problem. Thank you.

Solution 2:

When looking for a solution to my own question I thought that at the time onOpen callback is fired the datepicker is not opened yet. So I implemented solution that waits for the open class. I wonder if there is any better solution. I like anwer from Showrin Barua

var datepickerOptions = {
  container: document.querySelector('#datepicker-container'),
  onOpen: function() {
    var location = "#datepicker-container .open .datepicker-date-display"var value = this.el.valuesetText(location,value)
  }
}

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems, datepickerOptions);
});


functionsleep(ms) {
  returnnewPromise(resolve =>setTimeout(resolve, ms));
}

asyncfunctionsetText(location,value) {
  // Pause execution of this async function for 2 secondsawaitsleep(50);
  var e =  document.querySelector(location)
 
  if(e == null){
    setText(location,value)
  }else{
    e.innerHTML = `<span class="date-text">${value}</span>`;
  }
  //console.log(e.className)    //console.log('Waited for 2 seconds');
}

working jsFiddle

Share