Бенджамин рекомендовал Moment, абсолютно потрясающую библиотеку для манипулирования датами и временем. Тем не менее, манипулирование DOM не распространяется на Момент. Вам необходимо запросить DOM, прослушать события и обновить DOM в ответ на них.
Если мы разберем задачу под рукой, нам нужно
- рендерит три поля, в простейшем случае три входа,
- во входных данных, которые представляют дату начала и дополнительные данные для добавления, нам нужно установить прослушивателей событий , которые будут прослушивать "изменения" событий и собирать значения этих двух полей для вычисления даты окончания
- для третьего ввода, который должен показывать дату окончания, нам нужно менять его значение так часто, как меняются первые два ввода и действительно может быть вычислена дата окончания.
Мы можем думать о HTML-части как о трех входах:
<input id="start" type="date">
<input id="inc" type="number">
<input id="result" type="date">
Самое простое решение выглядит так:
window.addEventListener('DOMContentLoaded', () => {
const start = document.getElementById('start');
const inc = document.getElementById('inc');
const result = document.getElementById('result');
const updateEndDate = () => {
const startDate = new Date(start.value);
const addDays = Number(inc.value);
if (!isNaN(startDate) && !isNaN(addDays)) {
const days = startDate.getDate(); // <- returns the day component of the date (as opposed to weekday)
const endDate = new Date(startDate);
endDate.setDate(days + addDays);
result.value = endDate;
}
};
start.addEventListener('change', updateEndDate);
inc.addEventListener('change', updateEndDate);
});
Вы можете посмотреть, как этот код работает на Codepen , и вы можете его разветвлять, изменять, играть с ним сколько угодно. Давайте немного пройдемся по коду.
Во-первых, каждый элемент DOM может запускать событий DOM . Мы можем написать код, который прослушивает эти события и запускает прослушиватели событий - функции, которые мы определяем и контролируем. Таким образом, мы добавляем два прослушивателя событий: одно в start поле ввода, которое содержит дату начала в формате даты (потому что тип этого поля - «дата»), и одно в inc поле ввода, которое представляет дополнительные дни, которые будут добавлены .
Затем мы объявляем функцию, которая будет выполняться каждый раз при возникновении события «change» в поле ввода start или inc. Мы называем эту функцию updateEndDate, потому что это ее цель. Конечно, вы можете назвать это по-другому.
Наконец, внутри функции updateEndDate мы делаем три вещи: получаем значения полей start и inc и превращаем их в дату и число соответственно; мы проверяем, действительно ли это допустимые значения; и мы вычисляем новую (конечную) дату.
Часть, которая может быть наиболее запутанной, вот эта:
const days = startDate.getDate();
const endDate = new Date(startDate);
endDate.setDate(days + addDays);
Таким образом, метод Date#getDate возвращает компонент даты «день». Если дата «10 октября 2000 года», то этот метод вернет 10. Если это «17 января 1990 года», возвращаемое значение будет 17.
Затем мы создаем новый экземпляр объекта Date, endDate, который идентичен startDate. Это не обязательно важно в этом случае, но обычно рекомендуется работать с датой таким образом, потому что даты в Javascript изменяемые . Вызов методов, особенно тех, которые называются «set-что-то», изменит значение экземпляра, и часто вы можете этого не хотеть.
Итак, да, endDate. Последнее, что мы делаем, мы называем Date#setDate. Представьте, что дата начала 17 января 2019 года, и вы хотите добавить 50 дополнительных дней. Если мы просто добавим 50 к 17, дата окончания будет 67 января 2019 года, верно? Что ж, это одна вещь, которую Javascript делает для нас: как только дата обновляется (для нее вызывается «что-то множество»), она пересчитывается таким образом, который имеет смысл. Так что вместо этого будет 8 марта.
Я действительно надеюсь, что этот ответ поможет вам понять, что там происходит, и я желаю вам удачи в изучении Javascript. Так что, да, зацените codepen и желаем вам удачи!