Javascript 如何在Materialize datepicker中更改datepicker日期显示的内容？

我想知道我能否更改Materialze div类的内容

datepicker日期显示

从

Format:'yyyy-mm-dd'

这样的选项设置格式会很好，甚至隐藏类可能比现在更好

工作

我正在使用Materialize 1.0

       var datepickerOptions ={
        
                  format: 'yyyy-mm-dd',
                  autoClose : "true",
                  firstDay : 1,
        }  
  
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, datepickerOptions);
  });

---

就我阅读他们的文档而言，我没有找到一种方法来更改选择器中显示的日期字符串的格式。它们公开了一个名为

format

的选项，该选项仅适用于输出日期字符串。于是，我写了一个变通代码。如下所示。您也可以在这个链接中找到工作代码：谢谢

// HTML
<input class="datepicker" type=text value="2021-05-12"/>
<div id="datepicker-container"></div>
    

// JS
const dateToShow = '2021-05-08';

var datepickerOptions = {
  container: document.querySelector('#datepicker-container'),
  onOpen: function() {
    document.querySelector("#datepicker-container .datepicker-date-display").innerHTML = `<span class="date-text">${dateToShow}</span>`;
  }
}

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

//HTML
//JS
const dateToShow='2021-05-08'；
变量datepickerOptions={
容器：document.querySelector（“#日期选择器容器”），
onOpen:function（）{
document.querySelector（“#datepicker container.datepicker date display”）.innerHTML=`${dateToShow}`；
}
}
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.datepicker'）；
var instances=M.Datepicker.init（elems，datepickerOptions）；
});

在我阅读他们的文档时，我没有找到方法更改选择器中显示的日期字符串的格式。它们公开了一个名为

format

的选项，该选项仅适用于输出日期字符串。于是，我写了一个变通代码。如下所示。您也可以在这个链接中找到工作代码：谢谢

// HTML
<input class="datepicker" type=text value="2021-05-12"/>
<div id="datepicker-container"></div>
    

// JS
const dateToShow = '2021-05-08';

var datepickerOptions = {
  container: document.querySelector('#datepicker-container'),
  onOpen: function() {
    document.querySelector("#datepicker-container .datepicker-date-display").innerHTML = `<span class="date-text">${dateToShow}</span>`;
  }
}

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

//HTML
//JS
const dateToShow='2021-05-08'；
变量datepickerOptions={
容器：document.querySelector（“#日期选择器容器”），
onOpen:function（）{
document.querySelector（“#datepicker container.datepicker date display”）.innerHTML=`${dateToShow}`；
}
}
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.datepicker'）；
var instances=M.Datepicker.init（elems，datepickerOptions）；
});

这太完美了。正是我想要的。我也在考虑同样的问题，但也希望有更多的本地解决方案。您能更新您的答案，使其适用于我的JSFIDLE示例吗。我有两个日期选择者。我不明白为什么这只对第一个选择者有效，而对第二个选择者有效。我为这个问题创建了一个问题，你能在这里更新你的答案吗，这样我就可以接受了？目前它没有正确回答我的问题。这是完美的。正是我想要的。我也在考虑同样的问题，但也希望有更多的本地解决方案。您能更新您的答案，使其适用于我的JSFIDLE示例吗。我有两个日期选择者。我不明白为什么这只对第一个选择者有效，而对第二个选择者有效。我为这个问题创建了一个问题，你能在这里更新你的答案吗，这样我就可以接受了？目前它没有正确回答我的问题。