如何让Formik TimePicker仅返回HH:mm:ss格式的时间部分？

TimePicker的format="HH:mm:ss"配置仅控制组件界面的时间显示样式，其底层返回值始终是完整的JS Date对象，会默认携带基准日期（通常为1970-01-01或当前日期），因此需要额外做值转换处理。

方案1：在提交回调中转换（推荐，不影响组件回显逻辑） #

直接在Formik的onSubmit函数中对返回的Date对象做格式化，无需修改组件原有逻辑：

const handleSubmit = (values, actions) => {
  // 假设时间字段名为pickedTime
  const timeValue = values.pickedTime;
  // 方法1：原生JS实现格式化
  const formattedTime = timeValue.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
  // 方法2：如果项目引入了dayjs/moment等日期库，写法更简洁
  // const formattedTime = dayjs(timeValue).format('HH:mm:ss');
  
  // 后续业务逻辑直接使用formattedTime即可，即为纯时间字符串
  console.log(formattedTime);
  actions.setSubmitting(false);
}

方案2：在 onChange 阶段直接存储格式化后的字符串 #

如果希望Formik中存储的就是纯时间字符串，可以重写TimePicker的onChange逻辑，注意需要配套处理回显：

<TimePicker
  format="HH:mm:ss"
  // 回显时需要把字符串转回Date对象
  value={values.pickedTime ? new Date(`1970-01-01T${values.pickedTime}`) : null}
  onChange={(newDate) => {
    if (!newDate) return;
    const formattedTime = newDate.toLocaleTimeString('zh-CN', {
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
    // 直接把格式化后的字符串存入Formik
    setFieldValue('pickedTime', formattedTime);
  }}
  // 其余属性保持不变
/>

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