antd 组件 RangePicker 扩展，支持预选范围回填选中 antdts

最近在做和时间段范围相关的，预设常用的日期范围可以提高用户体验。可以说 antd 的组件是很不错的，但是美中不足的是，不支持预设范围回填选中，怎么办？

在此基础上封装一下好了。
先来看下效果图：
未选中：

文章图片

选中回填：

文章图片

看了下渲染出来的 html 内容，用的是 Tag 实现的。那我也这么实现好了。
主要是利用 RangePicker 的 renderExtraFooter 进行处理。如果回填值和预设值一致，就设置选中，否则就不选中。
还有一个关键的点：就是选中预设的 tag 后，需要关闭日期选择弹窗。所以还需要额外的处理 open。
具体实现看下面代码：

// rangePicker.tsx import React, { forwardRef } from 'react' import { Tag, DatePicker } from 'antd'; import { useState } from 'react'; import { RangePickerProps, RangePickerValue } from 'antd/lib/date-picker/interface'; const { RangePicker } = DatePickerconst Index = ({value, ranges = {}, onChange, open, format = "YYYY-MM-DD", ...props}: RangePickerProps, ref: any) => {const [val, setVal] = useState(value) const [show, setShow] = useState(open)const isDateSame = (key: string) => { const [start, end] = ranges[key] as RangePickerValue return val && val.length && start && end ? start.isSame(val[0]) && end.isSame(val[1]) : false } const tagCheck = (key: string) => () => { setVal(ranges[key]) const [start, end] = ranges[key] as RangePickerValue onChange && onChange(ranges[key] as RangePickerValue, [start ? start.format(format as string) : '', end ? end.format(format as string) : '']) setShow(false) }const footRanges = () => ({Object.keys(ranges).map(key => ( {key} ))})const onOpenChange = (status: boolean) => { setShow(status) }const onChangeFn = (dates: RangePickerValue, dateStrings: [string, string]) => { onChange && onChange(dates, dateStrings) setVal(dates) }return ( ) }export default forwardRef(Index)

【antd 组件 RangePicker 扩展，支持预选范围回填选中】怎么用呢？原来怎么使用，现在就怎么使用：

import React, { useState } from 'react' import moment from 'moment'; import { RangePickerValue, RangePickerPresetRange } from 'antd/lib/date-picker/interface'; import RangePicker from './rangePicker'const ranges: { [range: string]: RangePickerPresetRange } = { '今天': [moment(), moment()], '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)], '近一周': [moment().subtract('days', 7), moment()], '近两周': [moment().subtract('days', 14), moment()], '近一个月': [moment().subtract('days', 30), moment()], '近三个月': [moment().subtract('days', 90), moment()], '近半年': [moment().subtract('days', 182), moment()], // 一年的一半 '近一年': [moment().subtract('days', 365), moment()], '当月': [moment().startOf('month'), moment()], '当季': [moment().startOf('quarter'), moment()], '当年': [moment().startOf('year'), moment()], } const demo = () => { const [dateRange, setDateRange] = useState([])const rangePickerChange = (dates: RangePickerValue, dateStrings: [string, string]) => { console.log({dates, dateStrings}); setDateRange(dates) }return }