美文网首页
antd中RangePicker组件设置mode=['month

antd中RangePicker组件设置mode=['month

作者: 码老二 | 来源:发表于2020-01-09 18:12 被阅读0次

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

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

    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) => {
        setDateTime(value)
      }
    
      const handleOpenChange = (status) => {
        setOpen(status)
        if (!status) {
          handleDateTimeChange(moment2string(dateTime));
        }
      }
    
      const moment2string = (date) => {
        if (date.length) 
          return date[0].format('YYYY-MM') + ',' + date[1].format('YYYY-MM')
        else 
          return null
      }
    
      return (
        <RangePicker 
          placeholder={['起始时间', '结束时间']}
          value={dateTime}
          open={open}
          mode={['month', 'month']}
          format='YYYY-MM'
          onPanelChange={handlePanelChange}
          onOpenChange={handleOpenChange}
        />
      );
    }
    
    export default Test
    
    输出结果

    但是这种方法仍然不能完全模拟出onChange事件的效果,选择完时间后需要点击空白处让面板关闭,同时拿到时间。

    测试antd版本为3.26.6,若后续找到更好的办法再做优化。

    相关文章

      网友评论

          本文标题:antd中RangePicker组件设置mode=['month

          本文链接:https://www.haomeiwen.com/subject/ebzyactx.html