时间戳

首页 > 解决方案 > 如何在反应日历中设置点击日期？

javascript - 如何在反应日历中设置点击日期？

问题描述

我正在使用 react-calendar 并且我试图在单击后设置特定日期的样式，但我只设法找出如何设置整个月的样式。我尝试研究是否可以将单击的日期包装在 div 中并将该 div 分配给一个类，但我找不到这样做的方法。还有其他想法吗？

export const CalendarPage = () =>  {
  const datesToAddClassTo = ["Thu May 06 2021 00:00:00 GMT-0400 (Eastern Daylight Time)"];

  function tileClassName({date, view) {
      // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (view === 'month') {
      if (datesToAddClassTo[0] === date.toString()) {
        console.log("Match found!!!!!");
        return 'myClassName';
      }
    }
  }

  const [value, setValue] = useState(new Date());
  
  function onChange(nextValue) {
    setValue(nextValue);
  }

  return (
    <Calendar
      onChange={onChange}
      value={value}
      tileClassName={tileClassName}
    />
  );

标签： javascriptreactjs

解决方案

尝试更改为：

function tileClassName(data) {
    const { _, date, view } = data;

    // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (view === 'month') {
        if (datesToAddClassTo[0] === date.toString()) {
            console.log("Match found!!!!!");
            return 'myClassName';
        }
    }
}

然后为 添加样式.myClassName，如果它不适用 - 添加!important属性。

推荐阅读