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

艾米栗写代码

已于 2023-02-10 20:38:51 修改

阅读量1.7k

点赞数 1

分类专栏：前端下班一小时打卡文章标签：前端 javascript react.js

于 2023-02-10 20:37:12 首次发布

本文链接：https://blog.csdn.net/qq_34539486/article/details/128975443

版权

前端同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

下班一小时打卡

13 篇文章 0 订阅

订阅专栏

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

一、需求描述

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

功能

默认时间如下：

目的：将时间改为 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}>
      <RangePicker
        value={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