как сделать навигацию по датам?
Как сделать навигацию, чтобы выбирая дату из выпадающих списков поля ввода и кнопок (- + 1) получить день недели на любую произвольную дату?
var selDay = document.getElementById('c_day');
var selDate = document.getElementById('c_date');
var selMonth = document.getElementById('c_month');
var inpYear = document.getElementById("c_year");
var selEra = document.getElementById("c_era");
var days = [
"Воскресенье", "Понедельник", "Вторник",
"Среда", "Четверг", "Пятница", "Суббота"
];
var months = [
"января", "февраля", "марта", "апреля",
"мая", "июня", "июля", "августа",
"сентября", "октября", "ноября", "декабря"
];
var eras = [
["до н. э.", "-"],
["н. э.", "+"]
];
function getDaysMonth(d) {
return 34 - new Date(d.getFullYear(), d.getMonth(), 34).getDate();
}
getDaysMonth(new Date());
var date = new Date();
var daysMonth = getDaysMonth(date);
for (var i = 0; i < daysMonth; i++) {
var opt = selDate.appendChild(new Option(i + 1, i));
if (i + 1 === date.getDate()) opt.selected = true;
}
for (var i = 0; i < months.length; i++) { // месяц
var option = new Option(months[i], i);
if (i === date.getMonth()) option.selected = true;
selMonth.appendChild(option);
}
selDay.appendChild(new Option(days[date.getDay()])).selected = true; // день недели
inpYear.value = date.getFullYear();
inpYear.addEventListener('input', function() {
var val = this.value.replace(/\D+/g, '');
this.value = val.length > 6 ? val.slice(0, 6) : val;
});
for (var i = 0; i < eras.length; i++) {
var opt = selEra.appendChild(new Option(eras[i][0], eras[i][1]));
if (eras[i][0] === "н. э.") opt.selected = true;
}
div {
white-space: nowrap;
}
a,
select,
input,
textarea,
button {
outline: none;
}
select,
input,
button {
background-color: #fff;
color: #000;
font: 20px serif;
border: 1px solid #999;
border-radius: 5px;
}
input#c_year {
width: 92px;
text-align: center;
padding: 3px;
display: inline-block; // не все браузеры применяют свойство text-align: center; к полю ввода
}
.cont {
display: inline-flex;
justify-content: center;
align-content: center;
width: auto;
height: 40px;
}
.cont_lr {
padding: 0;
margin: 0;
flex: 1 1 auto;
align-self: stretch;
display: inline-flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
}
.m_p {
font: 12px/8px serif;
padding: 3px;
margin: 0;
flex: 1 1 auto;
align-self: stretch;
}
<div>
<select id="c_day"></select><br>
<span class="cont">
<select id="c_date" class="cont"></select>
<span class="cont_lr">
<button id="munus_date" class="m_p">-</button>
<button id="plus_date" class="m_p">+</button>
</span>
</span>
<span class="cont">
<select id="c_month" class="cont"></select>
<span class="cont_lr">
<button id="munus_month" class="m_p">-</button>
<button id="plus_month" class="m_p">+</button>
</span>
</span>
<span class="cont">
<input type="text" id="c_year" class="cont"></select>
<span class="cont_lr">
<button id="munus_year" class="m_p">-</button>
<button id="plus_year" class="m_p">+</button>
</span>
<span class="cont">
<select id="c_era" class="cont"></select><br>
<span class="cont_lr">
<button id="munus_era" class="m_p">-</button>
<button id="plus_era" class="m_p">+</button>
</span>
</span>
<button id="today" style="display: none;">сегодня</button>
</div>