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

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

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

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

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

enter image description here enter image description here

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

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

stack overflow Switching between calendar and month picker in react-datepicker?
原文答案
author avatar

接受的答案

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

好吧,这就是我最终决定采用的方法。

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

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

更新(09/2022):

一个在图书馆的示例网站上工作的简短示例,只需用它替换任何示例即可。这不是很漂亮或优化,但我希望它能让你了解逻辑是如何工作的。 (在此示例中,每次选择日期时,日期/月份选择器类型都会更改。在我的实际实现中 - 我无法再访问 - 这是由自定义标题组件中的按钮控制的。)

() => {
  const [isMonthPicker, setMonthPicker] = useState(false);
  const [startDate, setStartDate] = useState(new Date());
  return (
    isMonthPicker ?
    <DatePicker
      selected={startDate}
      onChange={(date) => {
          setMonthPicker(false);
          setStartDate(date);
        }
      }
      dateFormat="MM/yyyy"
      showMonthYearPicker
      showFullMonthYearPicker
    />
    :
    <DatePicker
      selected={startDate}
      onChange={(date) => {
          setMonthPicker(true);
          setStartDate(date);
        }
      }
      dateFormat="MM/yyyy"
    />
  );
};

答案: