如何使用react-hook-form将两个自定义日期、时间选择器组件的值合并为单个字段提交

没问题，用单个useController完全能实现这个需求，但得自己加一点日期时间合并的逻辑——毕竟你的DatePicker和TimePicker各自返回的Date对象，一个带日期信息、一个带时间信息，得把这俩捏成一个完整的Date才能传给服务器。下面给你两种可行的实现方案，你可以根据场景选：

方案一：用单个useController+局部状态实时合并 #

这种方案会在用户选择日期或时间时，实时把两个值合并成一个完整的Date对象，同步到表单的目标字段里。

import { useController } from 'react-hook-form';
import { useState } from 'react';

function DateTime() {
  // 用useController管理最终要提交的dateTimeFrom字段
  const { field: { onChange, value } } = useController({ 
    name: 'dateTimeFrom',
    defaultValue: new Date() // 可选：设置默认值
  });

  // 用局部状态分别存日期和时间的临时值，保证每个选择器的显示正确
  const [selectedDate, setSelectedDate] = useState(value || new Date());
  const [selectedTime, setSelectedTime] = useState(value || new Date());

  // 合并日期和时间的工具函数
  const mergeDateTime = () => {
    const mergedDate = new Date(selectedDate);
    // 把时间部分从selectedTime同步过来
    mergedDate.setHours(selectedTime.getHours());
    mergedDate.setMinutes(selectedTime.getMinutes());
    mergedDate.setSeconds(selectedTime.getSeconds());
    mergedDate.setMilliseconds(selectedTime.getMilliseconds());
    // 更新表单字段的值
    onChange(mergedDate);
  };

  return (
    <>
      <DatePicker 
        onChange={(date) => {
          setSelectedDate(date);
          mergeDateTime();
        }} 
        value={selectedDate}
      />
      <TimePicker 
        onChange={(time) => {
          setSelectedTime(time);
          mergeDateTime();
        }} 
        value={selectedTime}
      />
    </>
  );
}

这个方案的逻辑： #

• 两个选择器各自维护自己的临时状态，确保用户选择时组件能正确显示当前值
• 不管是选日期还是时间，都会触发合并函数，把最新的日期和时间整合成一个完整的Date，再传给useController的onChange，这样表单里的dateTimeFrom就始终是合并后的完整值了

方案二：分开管理字段，提交时合并 #

如果不需要实时同步合并后的值，只是在提交表单的时候再合并，这种方案会更简单——用两个useController分别管理日期和时间字段，提交时再把它们合并成一个Date。

import { useController, useForm } from 'react-hook-form';

function DateTime() {
  const { control, handleSubmit } = useForm();
  
  // 分别管理日期和时间字段
  const { field: dateField } = useController({ name: 'tempDate', control });
  const { field: timeField } = useController({ name: 'tempTime', control });

  // 表单提交时做合并
  const onSubmit = (formData) => {
    const mergedDateTime = new Date(formData.tempDate);
    // 把时间部分覆盖到日期对象上
    mergedDateTime.setHours(formData.tempTime.getHours());
    mergedDateTime.setMinutes(formData.tempTime.getMinutes());
    
    // 这里把mergedDateTime作为dateTimeFrom发给服务器
    fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ dateTimeFrom: mergedDateTime })
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DatePicker {...dateField} />
      <TimePicker {...timeField} />
      <button type="submit">提交表单</button>
    </form>
  );
}

这个方案的优势： #

• 不需要额外维护局部状态，逻辑更直观
• 只在提交时做一次合并操作，性能上更高效（如果你的表单比较复杂的话）

总结 #

• 如果需要实时看到合并后的日期时间值（比如表单预览、联动其他组件），选方案一；
• 如果只是提交给服务器用，方案二更简洁。

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