Materialize Datepicker - modify date display class

by radek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
<input class="datepicker" type=text value="2021-05-12"/>
<input class="datepicker" type=text value="2021-05-25"/>

<div id="datepicker-container"></div>

CSS

body {
  padding: 3em;
}

JavaScript

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

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


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function setText(location,value) {
  // Pause execution of this async function for 2 seconds
  await sleep(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');
}