react中封装antd日期框（近7天/日/月/周/季/年）

在React中，你可以使用Ant Design的DatePicker组件来创建一个日期选择器，并结合自定义的按钮来实现显示不同时间范围的功能（例如：近7天、日、月、周、季、年）。以下是一个简单的示例：

import React, { useState } from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';
 
const DateRangePicker = () => {
  const [range, setRange] = useState({
    startDate: null,
    endDate: null,
    key: 'recent7Days',
  });
 
  const ranges = {
    recent7Days: [Date.now() - 7 * 24 * 60 * 60 * 1000, 'today'],
    today: [new Date(), new Date()],
    thisMonth: [new Date(), new Date()],
    thisWeek: [new Date(), new Date()],
    thisQuarter: [new Date(), new Date()],
    thisYear: [new Date(), new Date()],
  };
 
  const setRecentRange = (key) => {
    setRange({
      startDate: ranges[key][0],
      endDate: ranges[key][1],
      key,
    });
  };
 
  return (
    <div>
      <button onClick={() => setRecentRange('recent7Days')}>近7天</button>
      <button onClick={() => setRecentRange('today')}>日</button>
      <button onClick={() => setRecentRange('thisMonth')}>月</button>
      <button onClick={() => setRecentRange('thisWeek')}>周</button>
      <button onClick={() => setRecentRange('thisQuarter')}>季</button>
      <button onClick={() => setRecentRange('thisYear')}>年</button>
      <br />
      <DatePicker.RangePicker
        value={[range.startDate, range.endDate]}
        onChange={(dates, dateStrings) => {
          setRange({
            startDate: dates[0],
            endDate: dates[1],
            key: 'custom',
          });
        }}
      />
    </div>
  );
};
 
export default DateRangePicker;

这段代码定义了一个名为DateRangePicker的函数组件，它使用Hook useState来管理日期范围的状态。ranges对象定义了不同预设的日期范围。setRecentRange函数用于设置当用户点击按钮时应用的日期范围。DatePicker.RangePicker组件用于渲染日期选择器，并允许用户自定义日期范围。