问题标签 [react-calendar]

我正在使用 React Calendar https://www.npmjs.com/package/react-calendar，我想通过单击开始日期和结束日期来选择日期范围。我在 Calendar 中使用了 selectRange 属性，但是第一次渲染 Calendar 时，甚至没有单击任何内容，范围选择器将自动将开始日期设置为今天的日期。我不想要这个。我想以干净的状态加载日历，然后当我开始单击将是开始日期时，我可以单击结束日期的下一个元素。我怎样才能做到这一点？

这是我的代码：

这是我不想要的功能示例（加载时它将自动选择今天的日期（6 月 5 日），然后我开始悬停以单击结束日期）： https ://i.gyazo.com/91ec726a453c2b138f9c1b0aae09e1a6.mp4

我正在使用 React Calendar https://www.npmjs.com/package/react-calendar并且我正在使用他们的 ref 道具来操作日期按钮，以便我可以将自定义功能直接添加到日历 DOM（只有真正的方式这样做我认为因为他们的道具是有限的。如果你们知道更好的方法，请告诉我，这样我就可以停止使用这种方法了！顺便说一句，我知道添加 CSS 的 tileClassName 存在，但我想要一些我可以的悬停功能'似乎并没有把我的头放在 tileClassName 中）。react 日历 ref 是对整个日历 div 的引用，而不是 React 组件 :( 。

react-calendar/src/YearView/Calendar.jsx 中的 Calendar.jsx

现在在我的自定义日历 js 中，在每个 useEffect 上，我都进行了设置，以便当前 Ref 的单击下一个导航按钮更改依赖于 useEffect 的月份状态，以便可以再次重新触发 useEffect。

现在，当我单击这个用红色圈起来的箭头按钮时，重新触发确实发生了，因为控制台再次记录了这两个项目，但是如果你检查我的 useEffect 函数，我正在打印那个 ref.Current 中的 ref.Current 和一个 ELEMENT . 我选择的这个元素是标题月/年（例如：上图中的 2021 年 7 月）。现在，控制台正在使用新的 2021 年 8 月日期正确打印当前的 ref DOM（第一个控制台打印）（因为导航按钮向上移动了一个月），但是当我使用 getElementByClassName 访问 ref DOM 时，它似乎正在打印以前的 Ref 元素（第二个控制台打印）而不是我需要的当前 Ref 元素标题。（例如：打印 2021 年 7 月，而应该是 2021 年 8 月）

如何修复它，以便在 useEffect 中访问的 Ref 元素是最新信息（基本上是来自记录的 ref.current 的信息）？尽管打印 ref.current 显示 2021 年 8 月，但似乎并非如此。我需要它在 useEffect 重新触发后恰好是最新的，以便我可以根据当前呈现的标题设置条件，但我可以由于这种困境，现在不要这样做。使这些 ref 元素保持最新的最佳方法是什么？谢谢

我正在使用React-Calendar，但无法更改月份，但单击导航面板中显示月份名称的箭头（后退/前进）。我的代码：

从 console.log on handler for onActiveStartDateChange，我可以看到日志中的日期已更改，但是，视图仍保留在当前月份。我究竟做错了什么？

我正在设计一个日历模式，为此我使用了 react-calendar npm 包（https://www.npmjs.com/package/react-calendar），我可以通过覆盖日历来更改包的 CSS带有本地副本的 dist 文件夹中的 .css ，但我不明白如何更改包的 HTML，我必须在最顶部添加一个文本并从导航面板中删除几个导航按钮。请参考下图，供参考。 第一张照片：到目前为止我做了什么

第二张图：我想要达到的目标

react-calendar-timeline我在我的代码中使用包。时间线的范围是 10 天。

加载时间线后，它应该显示从今天起 10 天的项目。DateHeader 始终正确加载，但画布显示 10 天前的项目。

这些是一些例子。第 1 组的项目范围为 07 27 ~ 07 29。

但是，在画布中，该项目在 08 06 ~ 的范围内。第一次加载

单击上一个或下一个按钮后，画布正确显示项目。单击上一个按钮后

但是，在单击 prev10 或 next10 按钮后（在单击 prev 或 next 之前），画布显示项目错误。首次加载后单击 next10 按钮

这是我的代码：

在一个组件中，我在左侧有一个使用 react-calendar 的日历。我可以通过可以选择日期的表单添加提醒。这两个日期的显示方式不同：react-calender 中的日期显示为 18/08/2021 格式，而提醒表单中的日期显示为 2021-08-18。

如何比较这两个值，以便在单击日历日期时仅在特定日期显示提醒？我尝试解析（MDN 似乎不推荐）但输出数字不同。我试图与 valueOf() 进行比较，但输出为假。

编辑：

我能够比较两个日期并且输出为真。因此，我设置了一个新的道具来提醒“显示”，状态为“假”。但是当我尝试在两个日期相同时将此道具返回为真时，道具不会改变。（使用开发工具手动更改它，显示/隐藏功能现在可以正常工作）。

在我的 index.js 文件中，我在单击日历中的特定日期时创建了一个 onChange 函数：

我也用 filter() 尝试过，但这似乎也不起作用。提醒会一直显示。

我正在尝试将所选日期传递给包含预订组件和预订按钮的组件。我需要为 axios 调用选择的日期。这是 Booking 组件的样子：

我的项目是用户填写的用于预订检查的表格。我有一个反应日历，他们用它来选择检查日期。我需要日历使当前日期之前的所有日子和所有未来的周末都处于非活动状态（因此只有未来的工作日是可点击的。然后根据用户输入（从可能的检查类型列表中选择）日历来制作未来 1 或 2 天后的第一个可用天。

我已经设法过滤了未来的周末，并且内置的 minDate 道具确保当前日期之前的所有日子都处于非活动状态，但我的过滤仍然有问题。它跳过 7 天而不是 2 天。请帮忙。

我试图从函数更改为类组件。代码对函数来说非常好，但是当我更改为类组件时，它似乎没有为我的 Datepicker 和我的输入传递变量。我不确定如何调用 this.state 上的 newEvent。一直在寻找调用 newEvent 的方法，但找不到它们。这是我的类组件代码

我的功能代码在这里

这是我当前的代码

const CalendarDisplay = () => { const [date, setDate] = useState(new Date());

}

每次在日历上选择一个新日期时，toString 都会产生类似的结果：

2021 年 11 月 13 日星期六 00:00:00 GMT-0500（东部标准时间）

我希望它改为输出：

2021 年 11 月 13 日

有谁知道在 React JSX 中使用 react-calander npm ( https://www.npmjs.com/package/react-calendar ) 如何更改输出？