Хочу сделать календарь новостей, с выводом всех месяцев. По нажатию на дату, будет записываться данные к примеру выбор 2 января 2020. Запись будет как 02.01.2020 можно в console.log, на стрелочку меняется год. Проблема, в том что я не нашел похожих календарей. Прикреплю картинку
-
так изи же календарь, причем его можно сделать из стандартного jquery-date-picker-range– DiD24 дек 2020 в 9:51
-
А почему "не нашел похожих календарей" - это проблема? Ну так сделайте его, и будете первопроходцем.– Инквизитор24 дек 2020 в 10:08
-
Проблема вывести все месяца и сделать их как табами.– Lorelei24 дек 2020 в 10:24
-
Вы бы посмотрели ответ пока я тут, а то, может быть, что-то исправить или объяснить надо– DiD24 дек 2020 в 13:15
Добавить комментарий
|
1 ответ
Сделано, конечно на скорую руку и без оформления. Работает без jQuery. Переделаете на jQuery сами.
const form = document.querySelector('form');
(form.oninput = ()=>{
let _year = +form.getAttribute('data-year');
let _month = +form.getAttribute('data-month');
let _date = +form.getAttribute('data-date');
let year = +form.querySelector('input[name="year"]').value;
let month = +form.querySelector('input[name="month"]:checked').value;
let date = +form.querySelector('input[name="date"]:checked').value;
let daycount = 28+(62648012+16*!(year%4)>>month*2&3);
if(_year!=year||_month!=month){
for(let i = 28; i <= 31; i++){
form.querySelector('#date-'+i).classList[i>daycount?'add':'remove']('hidden');
}
if(date > daycount) {
date = daycount;
form.querySelector('input[name="date"][value="'+date+'"]').click()
}
}
form.setAttribute('data-year', year);
form.setAttribute('data-month', month);
form.setAttribute('data-date', date);
//console.log(year,(''+month).padStart(2,0),(''+date).padStart(2,0));
let t = Math.trunc;
form.querySelector('.full-date-display .date').innerHTML = (''+date).padStart(2,0);
form.querySelector('.full-date-display .month').innerHTML = [,'января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'][month];
let dayofweek = (t(23*month/9)+(month<3?year--:year-2)+4+date+t(year/4)-t(year/100)+t(year/400))%7;
form.querySelector('.full-date-display .weekday').innerHTML = ['воскресение','понедельник','вторник','среда','четверг','пятница','суббота'][dayofweek];
})();
*{box-sizing: border-box}
.full-date-display{
width: 10rem;
height: 10rem;
float: left;
background: #00f4;
text-align: center;
}
.full-date-display .date{
font-size: 5rem;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.year-input {
border: 2px solid #ddd;
display: inline-flex;
float: right;
margin: 2rem 0 1rem 0;
}
.year-input,
.year-input * {
box-sizing: border-box;
}
.year-input a {
outline:none;
display: inline-block;
-webkit-appearance: none;
background-color: transparent;
border: none;
text-align: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
font-size: 2rem;
text-decoration: none;
}
.year-input input[type=number] {
font-family: sans-serif;
max-width: 10rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
font-size: 2rem;
height: 3rem;
font-weight: bold;
text-align: center;
}
.month-select { clear: right; white-space:nowrap;}
.month-select input[type="radio"] { display:none; }
.month-select label { margin: .5rem; }
.month-select input[type="radio"]:checked+label { color: red; }
.date-select { clear: right; white-space:nowrap; }
.date-select input[type="radio"] { display:none; }
.date-select label { margin: .2rem; }
.date-select input[type="radio"]:checked+label { color: red; }
.date-select input[type="radio"].hidden+ label { display:none; }
<form data-year="2020" data-month="12" data-day="25">
<div class="full-date-display">
<div class="date"></div>
<div class="month"></div>
<div class="weekday"></div>
</div>
<div>
<div class="year-input">
<a href="#" onclick="this.parentNode.querySelector('input[type=number]').stepDown();this.closest('form').oninput();" >❮</a>
<input class="year" min="1900" max="2200" name="year" step="1" value="2020" type="number">
<a href="#" onclick="this.parentNode.querySelector('input[type=number]').stepUp();this.closest('form').oninput();" class="plus">❯</a>
</div>
<div class="month-select">
<input id="month-01" type="radio" name="month" value="01"/><label for="month-01">январь</label>
<input id="month-02" type="radio" name="month" value="02"/><label for="month-02">февраль</label>
<input id="month-03" type="radio" name="month" value="03"/><label for="month-03">март</label>
<input id="month-04" type="radio" name="month" value="04"/><label for="month-04">апрель</label>
<input id="month-05" type="radio" name="month" value="05"/><label for="month-05">май</label>
<input id="month-06" type="radio" name="month" value="06"/><label for="month-06">июнь</label>
<input id="month-07" type="radio" name="month" value="07"/><label for="month-07">июль</label>
<input id="month-08" type="radio" name="month" value="08"/><label for="month-08">август</label>
<input id="month-09" type="radio" name="month" value="09"/><label for="month-09">сентябрь</label>
<input id="month-10" type="radio" name="month" value="10"/><label for="month-10">октябрь</label>
<input id="month-11" type="radio" name="month" value="11"/><label for="month-11">ноябрь</label>
<input id="month-12" type="radio" name="month" value="12" checked="checked"/><label for="month-12">декабрь</label>
</div>
<div class="date-select">
<input id="date-01" type="radio" name="date" value="01"/><label for="date-01">01</label>
<input id="date-02" type="radio" name="date" value="02"/><label for="date-02">02</label>
<input id="date-03" type="radio" name="date" value="03"/><label for="date-03">03</label>
<input id="date-04" type="radio" name="date" value="04"/><label for="date-04">04</label>
<input id="date-05" type="radio" name="date" value="05"/><label for="date-05">05</label>
<input id="date-06" type="radio" name="date" value="06"/><label for="date-06">06</label>
<input id="date-07" type="radio" name="date" value="07"/><label for="date-07">07</label>
<input id="date-08" type="radio" name="date" value="08"/><label for="date-08">08</label>
<input id="date-09" type="radio" name="date" value="09"/><label for="date-09">09</label>
<input id="date-10" type="radio" name="date" value="10"/><label for="date-10">10</label>
<input id="date-11" type="radio" name="date" value="11"/><label for="date-11">11</label>
<input id="date-12" type="radio" name="date" value="12"/><label for="date-12">12</label>
<input id="date-13" type="radio" name="date" value="13"/><label for="date-13">13</label>
<input id="date-14" type="radio" name="date" value="14"/><label for="date-14">14</label>
<input id="date-15" type="radio" name="date" value="15"/><label for="date-15">15</label>
<input id="date-16" type="radio" name="date" value="16"/><label for="date-16">16</label>
<input id="date-17" type="radio" name="date" value="17"/><label for="date-17">17</label>
<input id="date-18" type="radio" name="date" value="18"/><label for="date-18">18</label>
<input id="date-19" type="radio" name="date" value="19"/><label for="date-19">19</label>
<input id="date-20" type="radio" name="date" value="20"/><label for="date-20">20</label>
<input id="date-21" type="radio" name="date" value="21"/><label for="date-21">21</label>
<input id="date-22" type="radio" name="date" value="22"/><label for="date-22">22</label>
<input id="date-23" type="radio" name="date" value="23"/><label for="date-23">23</label>
<input id="date-24" type="radio" name="date" value="24"/><label for="date-24">24</label>
<input id="date-25" type="radio" name="date" value="25" checked="checked"/><label for="date-25">25</label>
<input id="date-26" type="radio" name="date" value="26"/><label for="date-26">26</label>
<input id="date-27" type="radio" name="date" value="27"/><label for="date-27">27</label>
<input id="date-28" type="radio" name="date" value="28"/><label for="date-28">28</label>
<input id="date-29" type="radio" name="date" value="29"/><label for="date-29">29</label>
<input id="date-30" type="radio" name="date" value="30"/><label for="date-30">30</label>
<input id="date-31" type="radio" name="date" value="31"/><label for="date-31">31</label>
</div>
</div>
</form>
-
Спасибо, вечером посижу поразбираюсь в коде. Только одно не совсем понятно, что значит + в +form– Lorelei25 дек 2020 в 5:34
-