Ant Design的 日期选择组件怎样在选择日期弹窗左侧加上今天，昨天，7日，本月，近30天选项的详细代码

Ant Design的日期选择组件DatePicker支持在选择日期弹窗左侧加上预设的日期选项，可以通过设置showTime属性来实现。具体步骤如下：

1. 在引入DatePicker组件的文件中，导入moment.js和antd的DatePicker组件。

import moment from 'moment';
import { DatePicker } from 'antd';

2. 在DatePicker组件中，设置showTime属性为一个对象，对象的属性包括：

- defaultValue：默认选中的日期，可以使用moment()方法获取当前日期。
- format：日期格式化字符串，例如'YYYY-MM-DD'。
- showToday：是否显示“今天”选项，设置为true即可显示。
- showYesterday：是否显示“昨天”选项，需要在日期选择弹窗左侧添加一个点击事件，点击后修改日期选择框的值为昨天的日期。
- showThisMonth：是否显示“本月”选项，需要在日期选择弹窗左侧添加一个点击事件，点击后修改日期选择框的值为本月的第一天和最后一天。
- showLast7Days：是否显示“7日”选项，需要在日期选择弹窗左侧添加一个点击事件，点击后修改日期选择框的值为7天前的日期和今天的日期。
- showLast30Days：是否显示“近30天”选项，需要在日期选择弹窗左侧添加一个点击事件，点击后修改日期选择框的值为30天前的日期和今天的日期。

下面是一个示例代码：

import React, { useState } from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

const DatePickerWithPresetOptions = () => {
  const [dateRange, setDateRange] = useState([]);

  const handleYesterdayClick = () => {
    const yesterday = moment().subtract(1, 'days');
    setDateRange([yesterday, yesterday]);
  };

  const handleThisMonthClick = () => {
    const firstDayOfMonth = moment().startOf('month');
    const lastDayOfMonth = moment().endOf('month');
    setDateRange([firstDayOfMonth, lastDayOfMonth]);
  };

  const handleLast7DaysClick = () => {
    const last7Days = moment().subtract(7, 'days');
    setDateRange([last7Days, moment()]);
  };

  const handleLast30DaysClick = () => {
    const last30Days = moment().subtract(30, 'days');
    setDateRange([last30Days, moment()]);
  };

  return (
    <RangePicker
      showTime={{
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      }}
      format="YYYY-MM-DD HH:mm:ss"
      value={dateRange}
      onChange={(dates) => setDateRange(dates)}
      ranges={{
        今天: [moment().startOf('day'), moment().endOf('day')],
        昨天: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
        '7日': [moment().subtract(7, 'days').startOf('day'), moment().endOf('day')],
        本月: [moment().startOf('month'), moment().endOf('month')],
        '近30天': [moment().subtract(30, 'days').startOf('day'), moment().endOf('day')],
      }}
      renderExtraFooter={() => (
        <div>
          <a onClick={handleYesterdayClick}>昨天</a>
          <a onClick={handleThisMonthClick}>本月</a>
          <a onClick={handleLast7DaysClick}>7日</a>
          <a onClick={handleLast30DaysClick}>近30天</a>
        </div>
      )}
    />
  );
};

export default DatePickerWithPresetOptions;

在这个示例中，我们创建了一个带有预设日期选项的DatePicker组件。通过设置showTime属性，我们可以让日期选择框显示时间选项。同时，我们设置了format属性来指定日期格式化字符串。在ranges属性中，我们定义了预设日期选项的名称和日期范围。在renderExtraFooter方法中，我们为每一个预设日期选项添加了一个点击事件。

希望这个示例能够帮助你在Ant Design的DatePicker组件中实现预设日期选项的功能。