Я поставил перед собой задачу создать средство выбора даты на ванильном Javascript. Это часть моего 100-дневного конкурса кода, в рамках которого я надеюсь кодировать хотя бы один час в день в своих собственных проектах.
Я выбрал Javascript в качестве языка для начала работы, это одно из моих самых слабых мест в веб-разработке.
Мое вдохновение для этого календаря от Airbnb. Я хочу создать что-то простое в использовании и выглядящее минималистично. Однако стайлинг — это только полдела.
День 1 — мне удалось заставить календарь отображать каждый месяц с правильным количеством дней, и вы можете использовать ввод выбора, чтобы выбрать месяц, который вы хотите увидеть. В нынешнем виде календарь просто добавляет новые месяцы в конец, мне нужно попытаться выяснить, как удалить существующие строки таблицы, прежде чем добавлять новые.
Когда даты отображаются в календаре, я добавил объект даты в ячейку в качестве атрибута данных, что, как мы надеемся, облегчит возврат дат пользователю при его выборе.
// function which takes an integer as the argument and creates a table for the month you're on. function buildCal(month) { let daysInMonth = new Date(2019, parseInt(month)+1, 0).getDate(); let startDay = new Date(year, month, 1).getDay(); let weekIndex = cal.getElementsByTagName('tr').length; let day = startDay == 0 ? 7 : startDay; var row = cal.insertRow(weekIndex); /* creates the blanks at the start of the month */ for(let ed = 1; ed < day; ed++) { row.insertCell(-1); } /* loops through the days adding cells and creating new rows */ for(let dim = 1; dim <= daysInMonth; dim++) { let cell = row.insertCell(-1); cell.setAttribute('data-date',new Date(year, month, dim)); cell.innerHTML = dim; day++; if(day == 8) { weekIndex++; row = cal.insertRow(weekIndex); day = 1; } } }
Что дальше?
Завтра я буду разрабатывать 3-месячное представление, я хочу, чтобы этот календарь прокручивался вертикально, чтобы соответствовать подходу, ориентированному на мобильные устройства. Я также создам входные данные, которые автоматически заполняются, когда пользователь выбирает дату в средстве выбора.