时间戳

首页 > 解决方案 > 如何选择开放日期选择器？querySelector("#datepicker-container .open .datepicker-date-display") 不起作用

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

问题描述

我使用了两个 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

在此处输入图像描述

标签： javascriptjquery-selectors

解决方案

试试这个。这是 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。它会解决问题。谢谢你。

推荐阅读