如何解决在 react-datepicker 中在日历和月份选择器之间切换?
我需要一个 React 项目的日期选择器组件,在评估了几个候选库之后,似乎 React Date Picker (react-datepicker
) 可以很好地满足大多数需求。
但是,项目设计表明,当用户在日期选择器的日历视图中单击月份名称时,他们应该获得一年中月份的网格视图以供选择。
React Date Picker 的内置月份选择器非常接近所需的视图和样式,日历和日历都不是问题。但我不认为在 RDP 中实现的不同视图/选择器之间存在这种转换。
为了说明这个想法,我基本上需要在同一输入字段中同时打开这些视图:
我知道 RDP 解决这个问题的方法是在月份名称下方有一个单独的月份选择器,我当然可以尝试将这个想法卖给我的项目设计师。但首先我想知道是否有人能想到一个简单的方法来做到这一点——或者更好的是,知道现有的(MIT 许可的或类似的)实现。
我想我可以通过为日历组件创建一个 custom header 来构建它,但是当 RDP 已经内置了这两个视图时,从头开始编写转换逻辑和月份选择器似乎很费力……如果我添加一个日历日期选择器和一个月份选择器到页面,然后在它们之间切换,显示一个同时隐藏另一个,我相信它们都有自己的输入字段,导致在两个字段中控制相同的数据(我会绝对要避免)。
解决方法
我想我可以通过为日历组件创建自定义标题来构建它 [...] 如果我将日历日期选择器和月份选择器都添加到页面,然后在它们之间切换显示一个同时隐藏另一个,我相信他们都会有自己的输入字段 […]
嗯,这就是我最终决定采用的方法。
幸运的是,我们的日期选择器设计相当简单,因此为日历创建自定义标题并不难,并且使用带有布尔值的简单 React useState
挂钩来显示和隐藏不同的选择器也相当容易。两个选择器都为日期使用另一个共享状态挂钩,因此它们(至少看起来)保持良好同步。
在我测试过的任何浏览器中,在两者之间切换都没有导致任何闪烁,所以我对最终结果非常满意。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。