在 react-datepicker 中显示特定日期的自定义事件答案

【问题标题】：Show custom events on specific days in react-datepicker在 react-datepicker 中显示特定日期的自定义事件
【发布时间】：2021-08-10 14:22:00
【问题描述】：

我在我的项目中使用react-datepicker，我浏览了文档但没有找到我需要的要求。它们在下面列出

显示一个月中特定日期的自定义详细信息（例如，2021 年 6 月 21 日，我想在日期下方显示“你好”）
同时显示 2 个（当前和下一个）日历月（默认情况下仅显示 1 个月）
点击后移至下一个日期的自定义按钮（就像当前日期是今天一样，点击“下一个”后，所选日期应更改为下一个日期）

是功能没有实现还是我错过了什么。希望有人帮助我。谢谢！

【问题讨论】：

标签： reactjs react-datepicker

【解决方案1】：

对于#1，您可以这样做Custom Day

() => {
  const [startDate, setStartDate] = useState(new Date());
  const renderDayContents = (day, date) => {
    return (<>
             <span>{day}</span> 
             {day === 21 && <p>hello</p>}
           </>);
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      renderDayContents={renderDayContents} // you can use this prop
    />
  );
};

对于#2，您要在其中显示当前和下个月。你可以这样做

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  monthsShown={2} // add this prop
/>

对于#3，您可以添加孩子Children

() => {
  const [startDate, setStartDate] = useState(new Date());
  
   const setNextDate = () => {
    const currentDate = new Date(startDate);
    const nextDay = new Date(currentDate.setDate(currentDate.getDate() + 1))
    setStartDate(nextDay)
  }
  
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)}> 
  <div> 
   <button> today </button> 
    <button onClick={setNextDate}> Next </button> 
  </div>
    </DatePicker>
  );
};

【讨论】：

更新了解决所有 #3 案例的答案。希望这可以帮助。干杯！