Помогите найти ошибку при выводе дат через JavaScript

Question

Имеется код для вывода месяцев(начиная с нынешнего +11), после в зависимости от выбранного месяца выводятся даты на этот месяц(в марте с нынешней даты до конца марта, т.е. с 18 по 31ое, В Апреле с 1го по 30ое и тд), тут и заключается проблема, жуткие не состыковки:

jQuery(document).ready(function() {
  Data = new Date();
  Year = Data.getFullYear();
  Month = Data.getMonth();
  Day = Data.getDate();

  var arr_month = [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь',
  ];


  var elem = document.getElementById('scrollbar1');

  for (i = 0; i < 12; i++) {
    var new_month = new Date(Year, Month + i, Day).getMonth();
    var label = document.createElement('label');
    label.className = 'item01';
    label.name = ('item01_label_name');
    $(label).attr('id', 'item01_label');
    var snap = document.createElement('snap');
    snap.className = 'item01_snap';
    snap.innerText = arr_month[new_month];
    var inp = document.createElement('input');
    inp.setAttribute('type', 'radio');
    inp.value = new_month;
    $(inp).attr('id', 'item01_radio');
    inp.name = ('item01_radio');
    $(inp).attr('required', true);

    label.appendChild(snap);
    label.appendChild(inp);
    elem.appendChild(label);
  }

  $('input:radio[name="item01_radio"]').change(function() {
    $('input:radio[name="item01_radio"]').parent().removeClass('label_main_selected');
    $('input:radio[name="item01_radio"]:checked').parent().toggleClass('label_main_selected');
    var month_check = $('input:radio[name="item01_radio"]:checked').val();

    if (month_check == Month) {

      var days = new Date(Year, (Data.getMonth() + 1), 0).getDate();
      var days_remained = days - Day;
      response = days_remained;
    } else {
      response = new Date(Year, (month_check + 1), 0).getDate();
    }

    document.getElementById('scrollbar2').innerHTML = "";
    var elem = document.getElementById('scrollbar2');
    console.log(response);
    for (i = 1; i < response + 1; i++) {
      if (month_check == Month) {
        new_date = new Date(Year, Data.getMonth(), Day + i).getDate();
        full_date = new Date(Year, Data.getMonth(), Day + i);
      } else {
        new_date = new Date(Year, month_check, i).getDate();
        full_date = new Date(Year, month_check, i);
      }
      var label = document.createElement('label');
      label.className = 'item11';
      label.name = ('item11_label_name');
      $(label).attr('id', 'item11_label');
      var snap = document.createElement('snap');
      snap.className = 'item11_snap';
      snap.innerText = new_date;
      var inp = document.createElement('input');
      inp.setAttribute('type', 'radio');
      inp.value = full_date;
      $(inp).attr('id', 'item11_radio');
      inp.name = ('item11_radio');
      $(inp).attr('required', true);

      label.appendChild(snap);
      label.appendChild(inp);
      elem.appendChild(label);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

       <main>
        <div class="grid_container">
            <div class = "wrapper">
                <div class="item0" id="scrollbar1">
                    
                </div>
                <div class="item1" id="scrollbar2">
                    
                </div>
            </div>
        </div>
    </main>

Переменная full_date вроде бы показывает правильный год и месяц Sun Apr 05 2020 00:00:00 GMT+0300 (Москва, стандартное время) Но если вы посмотрите, то в 5 Апреля - это четверг, а не воскресенье.
Если развилка if(month_check == Month) идет на else, то переменная response для месяцев Апрель, Май, Июнь, Июль, Август, Сентябрь , Октябрь будет соответственно равна 31,31,31,31,30,30,31,31 (вообще там с Апреля начинается цикл 4 по 31 2 по 30 и тд), что не соответствует количеству дней в этих месяцах.

Знаю, вопрос большой, но может кто то сразу заметит ошибку. Можете критиковать код, только просьба адекватно, указывая на плохой тон и на альтернативные способы решения!!!

Answer 1

Ошибка была в неявном преобразовании типов. Переменная month_check была строкового типа.

И при выполнении response = new Date(Year, (month_check + 1), 0).getDate(); делалось не то, что вы ожидали. Выполнялось что-то вроде response = new Date(2020, '21', 0).getDate();, при month_check = '2'.

jQuery(document).ready(function() {
  Data = new Date();
  Year = Data.getFullYear();
  Month = Data.getMonth();
  Day = Data.getDate();

  var arr_month = [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь',
  ];


  var elem = document.getElementById('scrollbar1');

  for (i = 0; i < 12; i++) {
    var new_month = new Date(Year, Month + i, Day).getMonth();
    var label = document.createElement('label');
    label.className = 'item01';
    label.name = ('item01_label_name');
    $(label).attr('id', 'item01_label');
    var snap = document.createElement('span');
    snap.className = 'item01_snap';
    snap.innerText = arr_month[new_month];
    var inp = document.createElement('input');
    inp.setAttribute('type', 'radio');
    inp.value = new_month;
    $(inp).attr('id', 'item01_radio');
    inp.name = ('item01_radio');
    $(inp).attr('required', true);

    label.appendChild(snap);
    label.appendChild(inp);
    elem.appendChild(label);
  }

  $('input:radio[name="item01_radio"]').change(function() {
    $('input:radio[name="item01_radio"]').parent().removeClass('label_main_selected');
    $('input:radio[name="item01_radio"]:checked').parent().toggleClass('label_main_selected');
    // вот тут ошибка month_check - имела строковое значение текущего месяца
    var month_check = +$('input:radio[name="item01_radio"]:checked').val();

    if (month_check == Month) {

      var days = new Date(Year, (Data.getMonth() + 1), 0).getDate();
      var days_remained = days - Day;
      response = days_remained;
    } else {
      response = new Date(Year, (month_check + 1), 0).getDate();
    }

    document.getElementById('scrollbar2').innerHTML = "";
    var elem = document.getElementById('scrollbar2');
    console.log(response);
    for (i = 1; i < response + 1; i++) {
      if (month_check == Month) {
        new_date = new Date(Year, Data.getMonth(), Day + i).getDate();
        full_date = new Date(Year, Data.getMonth(), Day + i);
      } else {
        new_date = new Date(Year, month_check, i).getDate();
        full_date = new Date(Year, month_check, i);
      }
      var label = document.createElement('label');
      label.className = 'item11';
      label.name = ('item11_label_name');
      $(label).attr('id', 'item11_label');
      var snap = document.createElement('snap');
      snap.className = 'item11_snap';
      snap.innerText = new_date;
      var inp = document.createElement('input');
      inp.setAttribute('type', 'radio');
      inp.value = full_date;
      $(inp).attr('id', 'item11_radio');
      inp.name = ('item11_radio');
      $(inp).attr('required', true);

      label.appendChild(snap);
      label.appendChild(inp);
      elem.appendChild(label);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>
  <div class="grid_container">
    <div class="wrapper">
      <div class="item0" id="scrollbar1">

      </div>
      <div class="item1" id="scrollbar2">

      </div>
    </div>
  </div>
</main>

БЛОГ НА HUSL

Помогите найти ошибку при выводе дат через JavaScript

Ответы (1 шт):