React DatePicker日期范围选择对接React Hook Form实现方法

开启selectsRange属性的react-datepicker组件，onChange回调返回值为[startDate, endDate]结构的日期数组，和单日期选择模式下返回单个Date对象的逻辑完全不同。错误对接写法没有适配这个值格式，既没有把数组拆解后分别绑定selected/startDate/endDate属性，也没有按数组格式更新表单值，自然无法获取完整的日期范围。
该场景下完全不需要额外用useState维护两份独立的日期状态，所有状态交给React Hook Form托管即可，完全匹配减少冗余状态、提升应用性能的使用诉求。

第一步：表单初始化时，将日期范围字段的默认值设置为[起始日期, 结束日期]的数组格式；
第二步：在Controller的渲染逻辑中，从字段值里解构出起止日期，分别绑定到DatePicker的对应属性，组件触发变更时直接把返回的日期数组同步给表单字段即可。
完整可运行代码：

import { useForm, Controller } from 'react-hook-form';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function RangePickerForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      orderDate: [new Date(), null]
    }
  });

  const handleSubmitForm = (data) => {
    const [orderStart, orderEnd] = data.orderDate;
    // 此处编写提交后的业务逻辑，直接使用起止日期即可
    console.log('选中范围：', orderStart, orderEnd);
  };

  return (
    <form onSubmit={handleSubmit(handleSubmitForm)}>
      <Controller
        name="orderDate"
        control={control}
        render={({ field }) => {
          const [startDate, endDate] = field.value ?? [];
          return (
            <DatePicker
              selected={startDate}
              startDate={startDate}
              endDate={endDate}
              onChange={(dateRange) => field.onChange(dateRange)}
              selectsRange
              inline
            />
          )
        }}
      />
      <button type="submit">提交表单</button>
    </form>
  );
}

如果需要强制用户选择完整的起止日期，直接给Controller添加rules配置即可，无需额外编写状态判断逻辑：

<Controller
  name="orderDate"
  control={control}
  rules={{
    validate: (val) => {
      const [start, end] = val ?? [];
      return (!!start && !!end) || '请选择完整的起止日期';
    }
  }}
  render={/* 同上的DatePicker渲染逻辑 */}
/>

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