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

Question

[prokopn]

Как сделать другого цвета выбранный диапазон в календаре? например: выбрали даты с 7 по 10. 7 и 10 остаются черного цвета, все, что между ними становится серым?

Comments

[Ivan Ustûžanin]

алгоритм ИМХО простейший:
0) если 2 дня выделено, сбрасываем выделение
1) если дней не выделено, устанавливаем дата-1
2) если 1 день выделен, устанавливаем дата-2 и проходимся по дням между дата-1 и дата-2 (с предварительной проверкой что дата-1 меньше дата-2) не включительно и делаем день серым

[alexalexes]

Уточните.
Нужно выделить диапазоны в жадном или ленивом режиме?
Например. Выделены числа 7,8,9,11,12,13, не выделено 10.
Если в ленивом режиме, то 7,9,11,13 будут черные, а 8,12 - серые.
А если в жадном, то 7,13 - черные, остальные выделения - серые.

[prokopn]

alexalexes, в жадном

[garbagecollected]

Не понял. Кто выбрал и когда? Числа с 7 по 10 должны быть выбраны заранее или во время использования? Чет вообще не ясна логика.

[prokopn]

garbagecollected, должны быть выбраны во время использования, то-есть по клику

[garbagecollected]

А кто писал этот скрипт?
Откуда он?

let oneDay = 60 * 60 * 24 * 1000
  let todayTimestamp =
    Date.now() -
    (Date.now() % oneDay) +
    new Date().getTimezoneOffset() * 1000 * 60

  let selectedDay = todayTimestamp

  const getNumberOfDays = (year, month) => {
    return 40 - new Date(year, month, 40).getDate()
  }

Это же просто трешак=))
Тут как-бы много логических ошибок, я не уверен, что будет правильно работать везде, и даже просто работать....

[garbagecollected]

Особенно вот это

getNumberOfDays = (year, month) => {
return 40 - new Date(year, month, 40).getDate()
}

Answer 1

[Zhuk]

Если не хочешь использовать date-picker из какого-нибудь фрейма то как сделать свой:
ps. если очень не любишь ; то привыкай, сложно понять где что закончилось именно на хабре

let startDate = null;
let endDate = null;

// в updateInput добавь
for (let i = 0; i < monthDetails.length; i++) {
                    if (monthDetails[i].month === 0) {
                        if (monthDetails[i].date.toString() === cell_date) {
                            // для проверки рейнджа
                            if (!startDate || (startDate && endDate)) {
                                // На первый клик или новый рейндж
                                clearSelection();
                                startDate = monthDetails[i].timestamp;
                                cell.classList.add("isSelected");
                            } else {
                                // Второй клик
                                endDate = monthDetails[i].timestamp;
                                highlightRange();
                            }
                        }
                    }
                }

//хелперы
const clearSelection = () => {
    startDate = null;
    endDate = null;
    document.querySelectorAll(".cell_wrapper").forEach(cell => {
        cell.classList.remove("isSelected", "inRange");
    });
};

const highlightRange = () => {
    if (startDate > endDate) {
        [startDate, endDate] = [endDate, startDate];
    }

    document.querySelectorAll(".cell_wrapper").forEach(cell => {
        if (cell.classList.contains("current")) {
            const cellDate = new Date(year, month, parseInt(cell.textContent)).getTime();
            
            if (cellDate === startDate || cellDate === endDate) {
                cell.classList.add("isSelected");
            } else if (cellDate > startDate && cellDate < endDate) {
                cell.classList.add("inRange");
            }
        }
    });
};

у меня работает, большая часть логики отсюда vueDatePicker , как-то раз очень пригодилось

.cell_wrapper.inRange {
    background-color: #f0f0f0;
    color: #272727;
}

.cell_wrapper.current.inRange {
    background-color: #e0e0e0;
    border-radius: 0;
}

.cell_wrapper.isSelected {
    border-radius: 50%;
    background-color: #272727;
    color: #fff;
}

Answer 2

[garbagecollected]

Вот, это работает:

/* #000 - это черные выделеные дни */
.cell_wrapper.cal_date.current.isSelected:not(:is(.isSelected ~ &)) {
  color: #fff;
  background: #000;
}
/* #888888 - это серые выделеные дни  */
.cell_wrapper.cal_date.current.isSelected ~ .isSelected{
  color: #fff;
  background: #888888;
}

/* #000 - это черные выделеные дни  */
.cell_wrapper.cal_date.current.isSelected:not(:has( ~ .isSelected)) {
  color: #fff;
  background: #000;
}

Но сам скрипт календаря - кривой!

Должно быть очевидно хотя бы из-за того, что декабрь 2024 начинается с воскресения. =)