为react-day-picker添加onChange逻辑适配react-final-form遇阻

我之前在把react-day-picker和react-final-form集成的时候也踩过这个坑！问题根源在于react-day-picker的onChange回调返回的是Day对象（或Day数组，如果是范围选择），而React Final Form的Field组件传递的input.onChange期望接收的是可以直接存入表单状态的原始值（比如日期字符串、时间戳这类），两者的参数格式不匹配，直接用常规的赋值方法自然无效。

下面是我亲测有效的适配方案，分单日期选择和范围选择两种场景：

1. 单日期选择的适配组件 #

首先创建一个适配组件，把DayPicker的输出格式转换成Final Form能识别的格式，同时把表单的现有值转换成DayPicker能解析的格式：

import React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';
// 用date-fns处理日期转换（也可以用moment或原生API）
import { format, parseISO } from 'date-fns';

const DayPickerField = ({ input, meta, ...dayPickerProps }) => {
  // 把表单存储的字符串日期转成DayPicker可识别的Date对象
  const selectedDate = input.value ? parseISO(input.value) : undefined;

  // 处理DayPicker的选择事件，转换为表单需要的格式
  const handleDayChange = (day) => {
    // 这里转成YYYY-MM-DD格式，也可以换成ISO字符串或其他格式
    const formattedDate = day ? format(day, "yyyy-MM-dd") : null;
    input.onChange(formattedDate);
  };

  return (
    <div>
      <DayPicker
        selected={selectedDate}
        onChange={handleDayChange}
        {...dayPickerProps} // 传递DayPicker的原生props（比如disabled、locale等）
      />
      {/* 展示表单验证错误 */}
      {meta.error && meta.touched && <span style={{ color: 'red', marginTop: '8px', display: 'block' }}>{meta.error}</span>}
    </div>
  );
};

export default DayPickerField;

2. 在Final Form中使用适配组件 #

直接把这个组件传给Field的component属性即可：

import { Form, Field } from 'react-final-form';

const MyDateForm = () => {
  const onSubmit = (formValues) => {
    console.log('提交的日期值:', formValues.selectedDate);
    // 这里处理表单提交逻辑
  };

  return (
    <Form
      onSubmit={onSubmit}
      initialValues={{ selectedDate: null }}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: '20px auto' }}>
          <h3>选择日期</h3>
          {/* 直接使用适配后的组件 */}
          <Field 
            name="selectedDate" 
            component={DayPickerField} 
            // 可以在这里传递DayPicker的原生属性，比如禁用过去的日期
            disabledDays={{ before: new Date() }}
          />
          <button type="submit" style={{ marginTop: '20px', padding: '8px 16px' }}>提交表单</button>
        </form>
      )}
    />
  );
};

3. 范围选择的适配组件（可选） #

如果需要范围选择，只需要修改适配组件的逻辑，处理数组格式的日期：

const RangeDayPickerField = ({ input, meta, ...dayPickerProps }) => {
  // 把表单存储的日期字符串数组转成Date对象数组
  const selectedRange = input.value 
    ? input.value.map(dateStr => parseISO(dateStr)) 
    : undefined;

  const handleRangeChange = (range) => {
    // 把Date对象数组转成字符串数组
    const formattedRange = range 
      ? range.map(day => format(day, "yyyy-MM-dd")) 
      : null;
    input.onChange(formattedRange);
  };

  return (
    <div>
      <DayPicker
        mode="range"
        selected={selectedRange}
        onChange={handleRangeChange}
        {...dayPickerProps}
      />
      {meta.error && meta.touched && <span style={{ color: 'red', marginTop: '8px', display: 'block' }}>{meta.error}</span>}
    </div>
  );
};

一些注意事项 #

• 日期转换工具：用专门的日期库（比如date-fns、moment）可以避免时区偏移导致的日期显示错误，比原生new Date()更可靠。
• 空值处理：一定要考虑input.value为null或undefined的情况，避免转换时抛出错误。
• 原生props传递：通过...dayPickerProps可以把DayPicker的所有原生属性（比如month、locale、disabledDays）传递过去，不影响原有功能。
• 表单验证：可以在Field组件上添加validate属性做自定义验证，错误信息会通过meta.error传递到适配组件中展示。

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