Пусть у нас есть три селекта, с помощью которых
мы можем выбрать год, месяц и день. Давайте
сделаем так, чтобы с помощью наших селектов
нельзя было выбрать некорректную дату, например,
30 февраля или 31 апреля.
Исходники кода
<select id="year-select"></select>
<select id="month-select"></select>
<select id="day-select"></select>
let yearSelect = document.querySelector('#year-select');
let monthSelect = document.querySelector('#month-select');
let daySelect = document.querySelector('#day-select');
let date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth() + 1;
let currentDay = date.getDate();
fillSelect(yearSelect, range(currentYear - 10, currentYear + 10));
fillSelect(monthSelect, range(1, 12));
fillSelect(daySelect, range(1, 31));
yearSelect.value = currentYear;
monthSelect.value = currentMonth;
daySelect.value = currentDay;
yearSelect.addEventListener('focus', selectFocusHandle);
monthSelect.addEventListener('focus', selectFocusHandle);
daySelect.addEventListener('focus', selectFocusHandle);
yearSelect.addEventListener('change', selectChangeHandle);
monthSelect.addEventListener('change', selectChangeHandle);
daySelect.addEventListener('change', selectChangeHandle);
function selectChangeHandle() {
if (checkDate(yearSelect.value, monthSelect.value, daySelect.value)) {
console.log('yes');
} else {
console.log('no');
this.value = this.dataset.default;
}
}
function selectFocusHandle() {
this.dataset.default = this.value;
}
function fillSelect(select, arr) {
arr.forEach(function(elem) {
select.add(new Option(elem));
});
}
function range(from, to) {
let result = [];
for (let i = from; i <= to; i++) {
result.push(i);
}
return result;
}
//select.add(new Option('text', 'value'));
function checkDate(year, month, day) {
let date = new Date(year, month - 1, day);
return date.getFullYear() == year && date.getMonth() == month - 1 && date.getDate() == day;
}
: