ЕЕсть какой то период времени (который можно установить в полях с типом дата ), есть какие то компоненты даты (день недели, число, месяц, год), возможно ли найти все даты соответствующме указанным критериям, например пятница 13го, понедельник 1 января и тому подобное?
возможно ли отследить событие, когда изменили установленное значение в одном из элементов формы (c id day, id date, id month, id year) в остальных элементах значения очищались?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 0 15px; }
div { min-width: 430px; border: 1px solid #ccc; padding: 5px; margin-top: 5px; }
span.text { font: italic 14px serif; color: hsl(207, 100%, 50%); }
span.background { display: inline-block;
background: -webkit-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: -moz-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: -o-linear-gradient(top, hsl(207, 100%, 85%), hsl(207, 100%, 99%));
background: linear-gradient(to top, hsl(207, 100%, 90%), hsl(207, 100%, 99%)); }
#day { width: 122px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#date { width: 41px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#month { width: 89px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#year { width: 50px; height: 19px; padding-left : 5px; background: transparent; color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#type_year { width: 115px; background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); }
#stopdata,
#startdata {
width: 91px;
height: 19px;
background: hsl(207, 100%, 90%);
color: hsl(207, 100%, 50%);
border: 1px solid hsl(207, 100%, 50%);
display: inline-block:
text-align: center; }
input, select { font: 14px serif; }
input[type=number], input[type=date] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=date]::-webkit-calendar-picker-indicator
{ display: none; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; }
input[type='number'] {
-moz-appearance: textfield; }
button { background: hsl(207, 100%, 90%); color: hsl(207, 100%, 50%); border: 1px solid hsl(207, 100%, 50%); font: 14px serif; position: relative; right: 2px; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
document.querySelector('#day').value = d.getDay()
document.querySelector('#date').value = d.getDate();
document.querySelector('#month').value = d.getMonth()+1;
document.querySelector('#year').value = d.getFullYear();
document.querySelector('#startdata').value = d.getFullYear() + '-01-01';
document.querySelector('#stopdata').value = d.getFullYear() + '-12-31';
});
</script>
</head>
<body>
<div>
<span class="text">Выберите нужные компоненты даты и установите нужные значения.</span><br>
<select id="day">
<option value=""></option>
<option value="1">Понедельник</option>
<option value="2">Вторник</option>
<option value="3">Среда</option>
<option value="4">Четверг</option>
<option value="5">Пятница</option>
<option value="6">Суббота</option>
<option value="0">Воскресенье</option>
</select><br/>
<select id="date">
<option value=""></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08"> 8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="month">
<option value=""></option>
<option value="1">января</option>
<option value="2">февраля</option>
<option value="3">марта</option>
<option value="4">апреля</option>
<option value="5">мая</option>
<option value="6">июня</option>
<option value="7">июля</option>
<option value="8">августа</option>
<option value="9">сентября</option>
<option value="10">октября</option>
<option value="11">ноября</option>
<option value="12">декабря</option>
</select>
<span class="background">
<input type="number" id="year"/>
</span>
<select id="type_year">
<option value="01" selected>любой</option>
<option value="02">простой</option>
<option value="03">высокосный</option>
</select><br><br>
<span class="text">Установите начало периода.</span><br>
<input type="date" id="startdata"/><br/>
<span class="text">Установите окончание периода.</span><br>
<input type="date" id="stopdata"/><br><br>
<button type="button">Начать поиск</button>
<button type="reset">Удалить результат и введённые данные</button>
</div>
<div id="rezultat">display none
</div>
</body>
</html>