Я пытаюсь открыть ввод календаря даты, когда событие изменения активировано.Есть раскрывающееся поле, и когда пользователь щелкает опцию «Определенная дата», класс удаляется и открывается средство выбора даты.В настоящее время я могу сосредоточиться на средстве выбора даты, но я хотел бы, чтобы открылся календарь выбора даты.Я не уверен, как достичь этого результата.Ниже приведен фрагмент моего кода, а также ссылка на кодовый блок.Я считаю, что в области, в которой мне необходимо открыть календарь, я добавил комментарий: «Ниже я попытался открыть календарь выбора даты».
Следует отметить, что я не могу использовать 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>
Очень ценю ваше время.