欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-05 11:11:30
...

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

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

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

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

相关标签: antd