2

Хочу сделать календарь новостей, с выводом всех месяцев. По нажатию на дату, будет записываться данные к примеру выбор 2 января 2020. Запись будет как 02.01.2020 можно в console.log, на стрелочку меняется год. Проблема, в том что я не нашел похожих календарей. Прикреплю картинкуcalendar

4
  • так изи же календарь, причем его можно сделать из стандартного jquery-date-picker-range
    – DiD
    24 дек 2020 в 9:51
  • А почему "не нашел похожих календарей" - это проблема? Ну так сделайте его, и будете первопроходцем. 24 дек 2020 в 10:08
  • Проблема вывести все месяца и сделать их как табами.
    – Lorelei
    24 дек 2020 в 10:24
  • Вы бы посмотрели ответ пока я тут, а то, может быть, что-то исправить или объяснить надо
    – DiD
    24 дек 2020 в 13:15

1 ответ 1

2

Сделано, конечно на скорую руку и без оформления. Работает без 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>

2
  • Спасибо, вечером посижу поразбираюсь в коде. Только одно не совсем понятно, что значит + в +form
    – Lorelei
    25 дек 2020 в 5:34
  • @Lorelei Этот плюс конвертирует строку в число.
    – DiD
    25 дек 2020 в 9:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.