如何选择开放日期选择器？ querySelector("#datepicker-container .open .datepicker-date-display") 不起作用答案

【问题标题】：How to select open date picker? querySelector("#datepicker-container .open .datepicker-date-display") does not work如何选择开放日期选择器？ querySelector("#datepicker-container .open .datepicker-date-display") 不起作用
【发布时间】：2021-07-31 00:36:53
【问题描述】：

我使用了两个 Materialize 日期选择器

<input class="datepicker" type=text value="2021-05-12"/>
<input class="datepicker" type=text value="2021-05-25"/>

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

我想更新.datepicker-date-display 的内容，所以我认为document.querySelector("#datepicker-container .open .datepicker-date-display") 会起作用。但它不返回任何元素。 document.querySelector("#datepicker-container .datepicker-date-display") - 没有 .open 总是返回第一个日期选择器。

知道为什么将 .open 添加到工作的 querySelector 不起作用吗？

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

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

工作jsFiddle

【问题讨论】：

标签： javascript jquery-selectors

【解决方案1】：

试试这个。这是js fiddle的链接：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>`;
  })
}

实际上，querySelector 只抓取第一个元素。这就是为什么第二个元素没有改变。使用 querySelectorAll。它会解决问题。谢谢。

【讨论】：

您的解决方案有效，但是......它会更改所有日期选择器的文本，甚至是不应该更改的文本。我想这没关系，因为它们没有显示出来。
是的，它会改变所有日期选择器的文本。因为您对所有人使用相同的选项。如果您不想要它，则为每个日期选择器使用具有不同 ID 的不同容器，并相应地调节 onOpen 函数。

【解决方案2】：

在为我自己的问题寻找解决方案时，我认为在触发 onOpen 回调时，日期选择器是 not opened。所以我为公开课实施了waits 的解决方案。我想知道是否有任何better 解决方案。我喜欢Showrin Barua的回答

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

工作jsFiddle

【讨论】：