【无标题】

最新推荐文章于 2025-07-22 15:31:58 发布

酒馆打烊了

最新推荐文章于 2025-07-22 15:31:58 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/Ang_pmj/article/details/126397203

该博客介绍了如何使用Ant Design的DatePicker组件来创建一个时间选择功能，包括今天、昨天、最近7天和最近30天的选择。通过定义items数组设置不同时间段，并利用onMouseEnter和onClick事件处理选中和显示时间范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间选择记录

import { DatePicker } from "antd";
import React, { useRef, useState } from "react";
import moment from "moment";
let todayMoment = moment();

const items = [
  {
    start: 0,
    end: 0,
    label: "今天",
    unit: "days",
  },
  {
    start: -1,
    end: -1,
    label: "昨天",
    unit: "days",
  },
  {
    start: -7,
    end: 0,
    label: "最近7天",
    unit: "days",
  },
  {
    start: -30,
    end: 0,
    label: "最近30天",
    unit: "days",
  },
];

function AntdPicker() {
  const [open, setOpen] = useState(false);
  const [initialValue, setInitialValue] = useState(null);
  const selectIndex = useRef(null);
  const onMouseEnter = (item: any) => {
    if (selectIndex.current == null) {
      const start = todayMoment.clone().add(item.start, item.unit);
      const end = todayMoment.clone().add(item.end, item.unit);
      setInitialValue([start, end]);
    }
  };
  const onMouseLeave = () => {
    if (selectIndex.current == null) {
      setInitialValue(null);
    }
  };
  const onClick = (item: any, index: number) => {
    onMouseEnter(item);
    selectIndex.current = index;
    setOpen(false)
  };
  return (
    <DatePicker.RangePicker
      open={open}
      value={initialValue}
      onOpenChange={(v) => {
        setOpen(v)
        if (v) {
          todayMoment = moment();
          selectIndex.current = null;
        }
      }}
      panelRender={(re) => (
        <div>
          <div style={{ display: "flex", alignItems: "center" }}>
            <div>
              <ul>
                {items.map((item, index) => (
                  <li
                    key={index}
                    onMouseEnter={() => onMouseEnter(item)}
                    onMouseLeave={onMouseLeave}
                    onClick={() => onClick(item, index)}
                  >
                    {item.label}
                  </li>
                ))}
              </ul>
            </div>
            {re}
          </div>
        </div>
      )}
    />
  );
}

export default AntdPicker;