Как нарисовать таблицу с датой которую ввёл пользователь?

Question

<span id="period">с: <input type="text" id="ifrom" /> по: <input type="text" id="ito" /></span>

Пользователь вводит диапазон даты в первый и второй <input>. Необходимо, с помощью JS, отрисовать таблицу с полным диапазоном дат.
К примеру, пользователь ввёл с 19.10.2020 по 22.10.2020, и надо в табличном виде вывести весь диапазон от 19 до 22 числа.

Answer 1

На самом деле, понимание и использование объекта Date() не столько сложно, сколько утомительно, учитывая форматы, локали и количество методов. Но, знать нужно обязательно.

Функция ниже отвечает на ваш вопрос и считает, как вперёд, так и обратно. Комментарии в коде:

function fCreateDateList() {
  if (ifrom.value && ito.value) {
    // Получаем объект Date() для начальной даты (ms)
    let dFrom = new Date(ifrom.value);
    // Получаем объект Date() для конечной даты (ms)
    let dTo = new Date(ito.value);
    // Получаем разницу полученных значений (ms)
    let nDif = dTo.getTime() - dFrom.getTime();
    // Получаем количество дней
    let nNumDay = Math.ceil(Math.abs(nDif) / 86400000);
    // Очищаем таблицу
    datelist.innerHTML = '';
    // Добавляем строку с заголовками в таблицу
    let oRTH = datelist.insertRow(-1);
    oRTH.innerHTML = `<th>№</th><th>Дата&nbsp;начиная<br>с&nbsp;${dFrom.toLocaleDateString('ru-RU')}</th>`;
    /* Перечисляем полученное количество дней */
    for (let d = 0; d < nNumDay; d++) {
      // Вычисляем день
      dFrom.setDate(dFrom.getDate() + (nDif > 0 ? 1 : -1));
      // Добавляем строку для вычисленной даты
      let oRTD = datelist.insertRow(-1);
      oRTD.innerHTML = `<td>${d + 1}</td><td>${dFrom.toLocaleDateString('ru-RU')}</td>`;
    }
  }
}

th,td{box-shadow:inset 0 0 2px blue;text-align:center;padding:.2em .4em;}

<span id="period">с: <input type="date" id="ifrom"> по: <input type="date" id="ito"> <button onclick="fCreateDateList()">Create</button></span>
<table id="datelist"></table>

БЛОГ НА HUSL

Как нарисовать таблицу с датой которую ввёл пользователь?

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