我试图在激活更改事件时打开日期日历输入。
有一个下拉字段,当用户单击“特定日期”选项时,我希望日历实际打开,但到目前为止我还没有成功。
我想要打开日历的区域,我添加了评论:“以下是我尝试打开日期选择器日历的内容”。
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);
});Run Code Online (Sandbox Code Playgroud)
.displayNone {
display: none;
}Run Code Online (Sandbox Code Playgroud)
<div>
<label>Date</label>
<select name="dateRange" …Run Code Online (Sandbox Code Playgroud)