如何基于Ant Design ProForm用户选择自动计算并显示下一个到期日

核心思路 #

通过监听间隔值、时间类型（天/月）、最后到期日三个字段的变化，自动计算并更新下一个到期日字段的值。推荐用useEffect监听状态变化，结合dayjs处理日期计算（Ant Design ProForm的日期组件默认依赖dayjs）。

具体实现步骤 #

1. 引入依赖：确保项目已安装dayjs，未安装则执行npm install dayjs。
2. 状态监听与计算：用useEffect监听intervalDays、kindOfDate、lastDueDate三个状态，任一状态改变时触发日期计算。
3. 日期计算逻辑：
   • 选择「Day(s)」（值为"1"）时，给最后到期日加上对应天数。
   • 选择「Month(s)」（值为"2"）时，给最后到期日加上对应月份，dayjs会自动处理跨月边界（比如2月28日加1个月到3月28日）。
4. 更新下一个到期日：计算完成后将结果同步到nextDueDate状态，自动填充到日期选择器。

修改后的完整代码 #

import { ProFormDigit, ProFormSelect, ProFormDatePicker, ProFormGroup } from '@ant-design/pro-form';
import { useState, useEffect } from 'react';
import dayjs from 'dayjs';

const YourFormComponent = () => {
  const [intervalDays, setIntervalDays] = useState(null);
  const [kindOfDate, setKindOfDate] = useState('1');
  const [lastDueDate, setLastDueDate] = useState(null);
  const [nextDueDate, setNextDueDate] = useState(null);

  // 监听字段变化，自动计算下一个到期日
  useEffect(() => {
    // 三个值都存在时才执行计算
    if (intervalDays && kindOfDate && lastDueDate) {
      let calculatedDate;
      if (kindOfDate === '1') {
        calculatedDate = dayjs(lastDueDate).add(intervalDays, 'day');
      } else if (kindOfDate === '2') {
        calculatedDate = dayjs(lastDueDate).add(intervalDays, 'month');
      }
      setNextDueDate(calculatedDate.toDate());
    }
  }, [intervalDays, kindOfDate, lastDueDate]);

  return (
    <>
      <ProForm.Group>
        <ProFormDigit 
          onChange={(value) => setIntervalDays(value)} 
          name="interval" 
          label="Interval" 
          min={1} // 限制最小间隔为1
        />
        <ProFormSelect
          onChange={(value) => setKindOfDate(value)}
          name="kindOfDate"
          label=""
          value={kindOfDate}
          options={[
            {
              value: "1",
              label: "Day(s)",
            },
            {
              value: "2",
              label: "Month(s)",
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDatePicker 
          onChange={(value) => setLastDueDate(value)} 
          name="lastDueDate" 
          label="Last Due Date" 
        />
        <ProFormDatePicker 
          value={nextDueDate}
          onChange={(value) => setNextDueDate(value)} 
          name="nextDueDate" 
          label="Next Due Date" 
          disabled={false} // 可根据需求设置是否禁用手动修改
        />
      </ProForm.Group>
    </>
  );
};

export default YourFormComponent;

补充说明 #

• 给ProFormDigit添加min={1}可避免输入非正整数。
• 若需禁止用户手动修改下一个到期日，将第四个日期选择器的disabled设为true即可。

内容的提问来源于stack exchange，提问作者Andish