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

Question

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

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

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

const datePickerEl = document.getElementById("js_datePickerToggle");

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

const getDateRange = (option) => {
  if (option === 'Today') {
    hideDatePicker();
  } else {
    // display datepicker
    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

inputElement.showPicker()如果选择器的类型为 ，则可以使用 打开选择器<input type="datetime-local">。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

Answer 2

经过一番研究后，我发现了日期输入元素的一般答案： Inspect HTML5 date picker Shadow DOM

如那里所述，显示的日期选择器元素是某种单独的窗口，似乎您不能直接调用它。

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