antd中RangePicker组件设置mode=['month', 'month']的问题

最新推荐文章于 2024-09-12 15:00:55 发布

码老二

最新推荐文章于 2024-09-12 15:00:55 发布

阅读量4.8k

点赞数 2

分类专栏： antd

本文链接：https://blog.csdn.net/Class2Grade3/article/details/103913574

版权

在 Ant Design 的 RangePicker 组件中，当设置 mode=['month', 'month'] 时，选择事件无法正常工作且选择后日期面板不会自动关闭。通过结合 onChange 和 onOk 事件可以获取选中时间，但仍然需要手动点击空白区域关闭面板。此问题在 Antd 版本 x.x.x 中存在，目前的解决方案并不理想。" 130902869,7374312,Stable-Diffusion-Webui：自定义主题教程,"['前端开发', 'AI应用', 'UI设计', '机器学习', 'web应用']

摘要由CSDN通过智能技术生成

antd的RangePicker组件的mode属性有date/month/year几个值可供选择，默认值为date，分别对应日/月/年时间范围的选择，但是在使用的过程中会发现当mode为默认值date的时候，使用是正常的，onchange事件可以生效，选择完日期之后会自动关闭日期选择面板，但是mode为其他值的时候onchang事件就不生效了，选择完时间后面板也不会关闭。

我的解决办法是组合onPanelChange和onOpenChange这两个事件来取到选中的时间值，以月为例，示例代码如下

import React, { useState } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

const { RangePicker } = DatePicker

function Test() {

  const [dateTime, setDateTime] = useState([])
  const [open, setOpen] = useState(false)

  const handleDateTimeChange = (dateTime) => {
    console.log(dateTime)
  }

  const handlePanelChange = (value) => {