Question

我试图在激活更改事件时打开日期日历输入。有一个下拉字段，当用户单击“特定日期”选项时，将删除一个类并显示日期选择器。目前，我可以专注于日期选择器，但是我想要的是打开日期选择器日历。我不确定如何获得此结果。以下是我的代码段，以及指向代码笔的链接。我认为我需要打开日历的区域，我添加了注释：“下面是我试图打开日期选择器日历的内容”。

需要注意的一件事，我不能使用jQuery。

Codepen：https://codepen.io/anon/pen/NJBXVz?editors=1010

document.addEventListener('DOMContentLoaded', function(){
	var dateOptions = document.getElementsByName("dateRange");
	// set the initial data-dateRange value
	var today = new Date().toISOString().split('T')[0];
	setDateRange(today, today);

	dateOptions[0].addEventListener('change', function(event){
		var optionValue = dateOptions[0].options[dateOptions[0].selectedIndex].text;
		getDateRange(optionValue, today);

	});
});

function getDateRange(option, endDate){
	if(option === 'Today'){
		setDateRange(endDate, endDate);
		hideDatePicker();

	} else if(option === 'Yesterday'){
		var date = backDate(1);
		setDateRange(date, date);
		hideDatePicker();

	} else if(option === 'Last 7 days'){
		var date = backDate(7);
		setDateRange(date, endDate);
		hideDatePicker();

	} else if(option === '30 days'){
		var date = backDate(30);
		setDateRange(date, endDate);
		hideDatePicker();

	} else {
		// This is where you open up the date selector
		var datePicker = document.getElementById("js_datePickerToggle");
		datePicker.classList.remove("displayHidden");
		// Set initial value of the datepicker
		datePicker.value = endDate;
		/*
		// Below is what I have tried to open the date picker calendar
		// datePicker.focus();
		// datePicker.click();
		// datePicker.select();
		
		*/

		// Will need to have an onchange event fire when a new date is selected.
	}
}

function setDateRange(fromDate, toDate){

	var dateAttr = document.querySelector('[daterange]');
	dateAttr.setAttribute('dateRange', JSON.stringify({'dateFrom': fromDate, 'dateTo': toDate}));

}

function backDate(num){

	var date = new Date();
	date.setDate(date.getDate()-num);

	return date.toISOString().split('T')[0];
}

function hideDatePicker(){
	var datePicker = document.getElementById("js_datePickerToggle");
	datePicker.classList.add("displayHidden");
}

.displayHidden{
  display: none;
}

<div class="">
  <label>Date</label>

  <select name="dateRange" dateRange=''>
    <option class="flex" value="Today">Today</option>
    <option class="flex" value="Yesterday">Yesterday</option>
    <option class="flex" value="Last 7 days">Last 7 days</option>
    <option class="flex" value="30 days">30 days</option>
    <option class="flex" type="date" value="Specific date">Specific Date<input type="date" id="js_datePickerToggle" class="displayHidden"></option>  
  </select>
</div>

真的很感谢您的时间。

Answer 1

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

如此处所述，所示的datepicker元素是如此单独的窗口，看来您不能称其为直接。

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

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

1 个答案: