Я поставил перед собой задачу создать средство выбора даты на ванильном 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-месячное представление, я хочу, чтобы этот календарь прокручивался вертикально, чтобы соответствовать подходу, ориентированному на мобильные устройства. Я также создам входные данные, которые автоматически заполняются, когда пользователь выбирает дату в средстве выбора.