Как выделить период наведения для другой даты в настраиваемом DatePicker - PullRequest
0 голосов
/ 06 мая 2020

У меня есть настраиваемый период выбора в приложении React. Когда я выбираю в нем две даты, окно выбора закрывается, а таблица данных обновляется. Эти две даты хранятся в таком состоянии: const [start, end] = useState(null);

Мне нужно сделать следующее: когда была выбрана первая дата периода (start), пользователь перемещает курсор на другую дату в DatePicker. Если курсор находится на другой дате (не нажат), все даты от начала до даты наведения должны быть затенены в фоновом режиме.

Я добавляю стиль CSS для одной закрытой даты:

&:hover {
  background-color: gray;
}

Как мне сделать это для всего периода?

Например: я выбираю 6 мая в качестве начала периода и нахожу указатель мыши на 9 мая. Все даты в периоде ( 6, 7, 8, 9 мая) должен быть серым

1 Ответ

0 голосов
/ 06 мая 2020

Итак, у вас есть начальные и конечные данные. Это означает, что вы можете вычислить или добавить какое-либо условие для отправки реквизита, например "cellInRange". Я использую css в js, поэтому есть возможность отправлять некоторые параметры, тогда вы можете проверить

const SomeElement = styled.div`
  background-color: ${props => props.cellInRange ? "blue" : "white"};
`

Что-то вроде этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...