如何选择开放日期选择器?querySelector(“#datepicker-container .open .datepicker-date-display")不起作用 [英] How to select open date picker? querySelector("#datepicker-container .open .datepicker-date-display") does not work

问题描述

我使用了两个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总是返回第一个日期选择器.

有人知道为什么将addind .open 添加到有效的querySelector不起作用吗?

  var datepickerOptions = {容器: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实例= M.Datepicker.init(elems，datepickerOptions);}); 

工作

解决方案

尝试这个.这是js小提琴的链接: 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.它将解决问题.谢谢.

I have two Materialize datepickers used

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

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

I want to update content of .datepicker-date-display so I thought that document.querySelector("#datepicker-container .open .datepicker-date-display") would work. But it does not return any element. document.querySelector("#datepicker-container .datepicker-date-display") - without .open returns always the first datepicker.

Any idea why addind .open to working querySelector does not work?

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

Working jsFiddle

解决方案

try this one. Here's the link of 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>`;
  })
}

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.

这篇关于如何选择开放日期选择器?querySelector(“#datepicker-container .open .datepicker-date-display")不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！