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) => {
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
,若后续找到更好的办法再做优化。
网友评论