当前位置：首页 > news >正文

antd日期组件时间范围动态跟随

news 2025/6/26 4:53:50

这周遇到了一个很诡异但又很合理的需求。掉了一周头发，死了很多脑细胞终于上线了。必须总结一下，不然对不起自己哈哈哈。

一、需求描述

默认当前日期时间不可清空。

功能

默认时间如下：

目的：将时间改为 2014-08-01 ~ 2014-08-12

antd交互

修改开始时间为 2014-08-01，结束时间的时间选择范围首先弹出的是 2014 年 12月和 2015年1月。

也就是说，当改变开始时间后，跳转到结束日期时，日期选择面板根据当前时间而定的。

但实际上，这是非常逆人性化的。

因为，当我们修改时间的时候，往往第二个时间的修改是依赖于第一个选择的时间的。

需求交互

于是，产品就提出了，希望，选择第二个时间的时候，展示的时间范围根据第一个选择的时间而定。
即当修改开始时间为 2014-08-01，结束时间的时间选择范围首先弹出的是 2014年 08月和 2015年 09 月。

好，希望我把需求描述清楚了。

文字再解释一遍：

比如：
当前功能：当前选择时间为：2015-01-01 至 2015-01-01，
修改开始时间为 2014-08-01，结束时间的时间选择范围首先弹出的是 2014 年 12月和 2015年1月。
期待功能：
修改开始时间为 2014-08-01，结束时间的时间选择范围首先弹出的是 2014年 8月和 2014年 9 月。

二、解决方法

在看了一天日期组件的api之后，我终于找到了使时间范围自动调整的方法。那就是在 focus 的时候，清空当前时间。

所以解决的思路就很明确了，在 onFocus 事件中清空当前时间。

下面我就在代码中，解释思路。

import React, { useEffect, useState } from "react";
import "./index.css";
import type { DatePickerProps } from "antd";
import { DatePicker, Space } from "antd";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(customParseFormat);
dayjs.extend(isBetween);const { RangePicker } = DatePicker;const dateFormat = "YYYY/MM/DD";const App: React.FC = () => {const [rangValue, setRangValue] = useState([dayjs(),dayjs().add(2, "month")]) as any;const [originValue, setOriValue] = useState(rangValue);const onFocus = (f: any) => {// 获取当前聚焦的值（不同的环境可能聚焦的值存的位置不同，要打印出来看看哪个属性是当前值）const value = f.srcElement._value;const isStart =dayjs(rangValue[0]).format(dateFormat) ===dayjs(value).format(dateFormat);// 聚焦在哪一个，就清空哪一个setRangValue([isStart ? "" : rangValue[0], isStart ? rangValue[1] : ""]);};// 清空之后如果用户不选择当前时间，则当前时间会被清空。 所以，要在 blur 的时候 用缓存下来的上次数据去补齐const onBlur = (b) => {setRangValue([rangValue[0] || originValue[0],rangValue[1] || originValue[1]]);setOriValue(rangValue);};// 用户有两种关闭形式，一种是跳转到另一个时间选择框，一种是鼠标点击其他区域，时间范围选择框自动关掉。于是，需要在时间范围选择框关掉的时候，再次补齐const onOpenChange = (open) => {if (!open) {setRangValue([rangValue[0] || originValue[0],rangValue[1] || originValue[1]]);setOriValue(rangValue);}};return (<Space direction="vertical" size={12}><RangePickervalue={rangValue}format={dateFormat}onFocus={onFocus}onBlur={onBlur}onOpenChange={onOpenChange}/></Space>);
};export default App;

以上就是这个需求的解决思路，但是这个解决方法是存在一些风险的。

即，在focus 事件中能否判断出当前focus 的是开始时间还是结束时间。

于是，我给antd 官方提了issue，希望新增加一个数据，去实现该跟随功能，或者在onfocus事件中多暴露一个参数。

欢迎大家前去支持：日期组件时间范围动态跟随（can rangepicker component provied prop to achieve paneltime dynamically followed pre chosen time） · Issue #40680 · ant-design/ant-design · GitHub