如何阻止Antd RangePicker自动交换时间并抛出验证错误？

Antd的RangePicker默认会自动将较早的时间设为起始值、较晚的设为结束值，导致用户选择逆序时间时被自动修正，体验不佳。而且TimePicker的order属性并不适用于RangePicker，所以设置后无效。以下是实现禁用自动交换并抛出验证错误的具体方案：

1. 改用受控模式阻止自动排序 #

通过绑定value和onChange事件，直接保留用户选择的原始时间顺序，不允许组件自动调整：

<Form.Item
  name={name}
  label="Start/End Datetime"
  style={{ marginBottom: 15 }}
  rules={[
    {
      required: required,
      message: "This is a mandatory field",
    },
    // 新增时间顺序验证规则
    {
      validator: (_, value) => {
        if (value?.length === 2 && value[0] && value[1]) {
          if (moment(value[0]).isAfter(value[1])) {
            return Promise.reject(new Error("结束时间不能早于开始时间"));
          }
        }
        return Promise.resolve();
      },
    },
    {
      validator: (_, value) => customValidator(value)
    },
  ]}
>
  <RangePicker
    style={{ width: '100%' }}
    format={'YYYY-MM-DD HH:mm'}
    showTime={{ format: 'HH:mm' }}
    onCalendarChange={(dates) => {
      setStartDate(dates?.[0]);
      setEndDate(dates?.[1]);
    }}
    disabledDate={disabledDate}
    disabledTime={disabledRangeTime}
    // 绑定受控值
    value={[startDate, endDate]}
    onChange={(dates) => {
      // 直接保存用户选择的原始时间，不做排序
      setStartDate(dates?.[0]);
      setEndDate(dates?.[1]);
      // 如果使用Form实例，也可以直接设置字段原始值
      // form.setFieldsValue({ [name]: dates });
    }}
  />
</Form.Item>

2. 调整时间禁用逻辑（可选） #

原有的disabledRangeTime函数依赖startDate和endDate的顺序，当用户选择逆序时间时，可能导致禁用逻辑异常。可以在函数中先判断时间顺序，再调整禁用规则：

const disabledRangeTime = (_, type) => {
  // 先判断当前选中的时间顺序是否合理
  const isStartAfterEnd = startDate && endDate && moment(startDate).isAfter(endDate);
  
  if (type === 'start') {
    return {
      disabledHours: () => {
        if (!endDate) return null;
        // 如果起始时间晚于结束时间，反转禁用逻辑
        if (isStartAfterEnd) {
          return range(0, 24).splice(0, moment(endDate).hour());
        }
        return range(0, 24).splice(moment(startDate).add(1, 'hour').hours(), 24);
      },
      disabledMinutes: () => {
        if (!endDate || !moment().isSame(endDate, 'day')) return null;
        if (isStartAfterEnd) {
          return range(0, 60).splice(0, moment(endDate).minutes());
        }
        return range(0, 60).splice(
          moment(startDate).add(1, 'minute').minutes(),
          60,
        );
      },
    };
  }
  return {
    disabledHours: () => {
      if (!startDate) return null;
      if (isStartAfterEnd) {
        return range(0, 24).splice(moment(endDate).add(1, 'hour').hours(), 24);
      }
      return range(0, 24).splice(0, moment(startDate).hour());
    },
    disabledMinutes: () => {
      if (!startDate || !moment().isSame(startDate, 'day')) return null;
      if (isStartAfterEnd) {
        return range(0, 60).splice(
          moment(endDate).add(1, 'minute').minutes(),
          60,
        );
      }
      return range(0, 60).splice(0, moment(startDate).minutes());
    },
  };
};

关键说明 #

• RangePicker本身没有提供禁用自动排序的属性，必须通过受控模式手动控制值的顺序。
• 表单验证规则是核心，通过validator判断时间顺序，不符合要求时直接抛出错误提示，引导用户修正。

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