在 react-datepicker 中的日历和月份选择器之间切换？

Question

我需要一个用于 React 项目的日期选择器组件，在评估了几个候选库之后，React Date Picker (react-datepicker) 似乎可以很好地满足大多数要求。

但是，项目设计表明，当用户在日期选择器的日历视图中单击月份名称时，他们应该获得一年中月份的网格视图以供选择。

React Date Picker 的内置月份选择器非常接近所需的视图，并且样式和日历都不是问题。但我不认为在 RDP 中实现的不同视图/选择器之间存在这种转换。

为了说明这个想法，我基本上需要为同一个输入字段同时打开这些视图：

我知道 RDP 解决此问题的方法是在月份名称下方有一个单独的月份选择器，我当然可以尝试将这个想法推销给我的项目设计师。但首先我想知道是否有人能想到一种简单的方法来做到这一点——或者更好的是，知道现有的（MIT 许可或类似的）实现。

我想我可以通过为日历组件创建一个custom header 来构建它，但是当 RDP 已经内置了这两个视图时，从头开始编写转换逻辑和月份选择器似乎相当费力......如果我同时添加一个日历日期选择器和月份选择器到页面，然后在它们之间切换显示一个而隐藏另一个，我相信他们都有自己的输入字段，导致在两个字段中控制相同的数据（我肯定想要避免）。

Answer 1

我想我可以通过为日历组件创建一个自定义标题来构建它 [...] 如果我将日历日期选择器和月份选择器都添加到页面，然后在它们之间切换显示一个而隐藏另一个，我相信他们都会有自己的输入字段 […]

嗯，这就是我最终决定采用的方法。

幸运的是，我们的日期选择器设计相当简单，因此为日历创建自定义标题并不难，并且使用带有布尔值的简单 React useState 钩子显示和隐藏不同的选择器相当容易。两个选择器都为日期使用另一个共享状态挂钩，因此它们（至少看起来）保持同步。

在两者之间切换并没有导致在我测试过的任何浏览器中出现任何闪烁，所以我对最终结果非常满意。