在Formik中集成MUI v6 TimePicker的实践指南

import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { Formik, Form, Field } from 'formik';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 如果需要中文或其他语言环境

// ... 其他 MUI 组件导入

function App() {
  // ...
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn"> {/* 或 'en' */}
      {/* 您的应用内容 */}
    </LocalizationProvider>
  );
}

const initialFormValues = {
  mondayFrom: "", // 初始值为空字符串，或者是一个有效的 "HH:mm" 格式字符串
  mondayTo: "",
};

const onSubmit = async (values) => {
  console.log('提交的表单值:', values);
  // 在这里处理表单提交逻辑，例如发送到API
};

import React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { Formik, Form, Field } from 'formik';
import dayjs from 'dayjs'; // 确保导入dayjs

function TimePickerForm() {
  const initialFormValues = {
    mondayFrom: "", // 初始值为空字符串
    mondayTo: "",
  };

  const onSubmit = async (values) => {
    console.log('提交的表单值:', values);
    // 假设 values.mondayFrom 现在是 "HH:mm" 格式的字符串
    alert(`提交成功！周一从: ${values.mondayFrom}`);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
      <div style={{ margin: 20, padding: 20, maxWidth: 400 }}>
        <h2>MUI TimePicker与Formik集成示例</h2>
        <Formik
          initialValues={initialFormValues}
          onSubmit={onSubmit}
          enableReinitialize={true} // 如果initialValues可能在组件生命周期中改变，则设置为true
        >
          {({
            handleSubmit,
            values,
            errors,
            touched,
            setFieldValue, // 从Formik的渲染属性中获取setFieldValue
          }) => (
            <Form onSubmit={handleSubmit}>
              <Field name="mondayFrom">
                {({ field }) => {
                  // field.value 在这里会是 initialFormValues.mondayFrom，即 "" 或 "HH:mm" 字符串
                  // TimePicker期望接收一个 Dayjs 对象或 null。
                  // 因此，我们需要将 field.value (字符串) 转换回 Dayjs 对象，或者在初始为空时传入 null。
                  const selectedTime = field.value ? dayjs(field.value, "HH:mm") : null;

                  return (
                    <TimePicker
                      ampm={false} // 24小时制
                      format="HH:mm"
                      slotProps={{
                        textField: {
                          label: "周一从",
                          size: "small",
                          fullWidth: true,
                          error: touched.mondayFrom && Boolean(errors.mondayFrom),
                          helperText: touched.mondayFrom && errors.mondayFrom,
                        },
                      }}
                      value={selectedTime} // 将字符串值转换为 Dayjs 对象或 null
                      onChange={(newValue) => {
                        // newValue 是一个 Dayjs 对象或 null
                        const formattedTime = newValue ? newValue.format("HH:mm") : "";
                        setFieldValue('mondayFrom', formattedTime); // 使用setFieldValue更新Formik状态
                      }}
                    />
                  );
                }}
              </Field>

              {/* 可以添加更多TimePicker字段，例如 mondayTo */}
              <div style={{ marginTop: 20 }}>
                <Field name="mondayTo">
                  {({ field }) => {
                    const selectedTime = field.value ? dayjs(field.value, "HH:mm") : null;
                    return (
                      <TimePicker
                        ampm={false}
                        format="HH:mm"
                        slotProps={{
                          textField: {
                            label: "周一到",
                            size: "small",
                            fullWidth: true,
                            error: touched.mondayTo && Boolean(errors.mondayTo),
                            helperText: touched.mondayTo && errors.mondayTo,
                          },
                        }}
                        value={selectedTime}
                        onChange={(newValue) => {
                          const formattedTime = newValue ? newValue.format("HH:mm") : "";
                          setFieldValue('mondayTo', formattedTime);
                        }}
                      />
                    );
                  }}
                </Field>
              </div>

              <button type="submit" style={{ marginTop: 20 }}>
                提交
              </button>
            </Form>
          )}
        </Formik>
      </div>
    </LocalizationProvider>
  );
}

export default TimePickerForm;