JavaScript 打开输入日期选择器事件

Question

我正在尝试在激活更改事件时打开日期日历输入。

有一个下拉字段，当用户单击“特定日期”选项时，我希望日历实际打开，但到目前为止我还没有成功。

我要打开日历的区域，我添加了评论：'以下是我尝试打开日期选择器日历的内容'。

const hideDatePicker = () => {
  const datePickerEl = document.getElementById("js_datePickerToggle");
  datePickerEl.classList.add("displayNone");
};

const getDateRange = (option) => {
  if (option === 'Today') {
    // Doing Stuff
    hideDatePicker();
  } else {
  const datePickerEl = document.getElementById("js_datePickerToggle");

  datePickerEl.classList.remove("displayNone");

  /*
    * Below is what I have tried to open the date picker calendar
    * datePickerEl.focus();
    * datePickerEl.click();
    * datePickerEl.select();
  */
  }
}

const dateOptionEls = document.getElementsByName("dateRange");

dateOptionEls[0].addEventListener('change', (event) => {
  const optionValue = dateOptionEls[0].options[dateOptionEls[0].selectedIndex].text;
  getDateRange(optionValue);
});

.displayNone {
  display: none;
}

<div>
  <label>Date</label>
  <select name="dateRange" dateRange=''>
    <option value="Today">Today</option>
    <option type="date" value="Specific date">Specific Date
      <input type="date" id="js_datePickerToggle" class="displayNone">
    </option>  
  </select>
</div>

非常感谢您的时间。

Answer 1

经过一些研究，我找到了一般日期输入元素的答案： Inspect HTML5 date picker shadow DOM

如那里所述，显示的 datepicker 元素是一种单独的窗口，您似乎不能直接调用它。

所以答案是：不，你不能打开日期选择器。您应该使用一些基于 JavaScript 的 DateTimePickers。我可以推荐 flatpickr 或 pickmeup，它们是用 Vanilla JavaScript 制作的并且非常轻量级。