在AntD v5.16.4结合React 18.2.0的项目中，如何修改Day.js日期选择器的已设置日期？

嘿，我来帮你搞定这个日期回显和修改的问题～ 结合你描述的场景（MongoDB存YYYY-MM-DD字符串，编辑时回显并修改），咱们一步步来梳理：

一、先确保日期能正确回显到DatePicker #

你现有代码里用dayjs(estimatedShippingDate)把数据库返回的字符串转成Day.js对象给DatePicker的value，这个思路是对的，但要补几个细节避免踩坑：

• 校验日期有效性：如果数据库返回的日期是null、空字符串或者格式不对，直接用dayjs()解析会得到当前日期，这显然不是我们要的。可以加个有效性判断：

  value={estimatedShippingDate ? (dayjs(estimatedShippingDate).isValid() ? dayjs(estimatedShippingDate) : null) : null}
  

• 时区兼容（可选）：如果数据库存的是UTC日期，而前端用的是本地时区，可能会出现日期偏移（比如数据库是2024-05-20，前端解析成2024-05-19），这时候可以用UTC解析再转本地时区：

  value={estimatedShippingDate ? dayjs.utc(estimatedShippingDate).local() : null}
  

二、处理日期修改的逻辑 #

你的handleShippingDateChange函数需要正确接收修改后的Day.js对象，然后在提交时再转成YYYY-MM-DD格式存回数据库：

1. 实现handleShippingDateChange：AntD5的DatePicker onChange回调返回的date本身就是Day.js对象（前提是你已经把Day.js配置为AntD的日期库），所以直接更新状态就行：

   const handleShippingDateChange = (date, index) => {
     // 假设你的表单数据存在一个数组state里，比如formData
     setFormData(prev => {
       const newData = [...prev];
       // 把修改后的日期存为字符串，也可以存Day.js对象，看你状态管理习惯
       newData[index].estimatedShippingDate = date ? date.format("YYYY-MM-DD") : null;
       return newData;
     });
   };
   

2. 提交时的格式转换：不管状态里存的是Day.js对象还是字符串，提交到MongoDB前统一转成YYYY-MM-DD格式：

   const handleSubmit = () => {
     const submitData = {
       ...formData,
       estimatedShippingDate: formData.estimatedShippingDate ? dayjs(formData.estimatedShippingDate).format("YYYY-MM-DD") : null
     };
     // 调用接口提交到MongoDB
   };
   

三、完整的组件示例参考 #

给你一个简化版的完整组件代码，方便你对照：

import React, { useState, useEffect } from 'react';
import { DatePicker, Form, Button } from 'antd';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

// 导入Day.js的UTC插件（如果需要处理时区的话）
dayjs.extend(utc);

const EditForm = () => {
  const [formData, setFormData] = useState({
    estimatedShippingDate: null,
    // 其他表单字段...
  });

  // 模拟从MongoDB获取数据
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/get-data'); // 替换成你的实际接口
      const data = await res.json();
      // 把数据库返回的YYYY-MM-DD字符串存到状态
      setFormData(prev => ({ ...prev, estimatedShippingDate: data.estimatedShippingDate }));
    };
    fetchData();
  }, []);

  const handleShippingDateChange = (date) => {
    setFormData(prev => ({
      ...prev,
      estimatedShippingDate: date ? date.format("YYYY-MM-DD") : null
    }));
  };

  const handleSubmit = async () => {
    // 提交前确保日期格式正确
    const submitData = {
      ...formData,
      estimatedShippingDate: formData.estimatedShippingDate ? dayjs(formData.estimatedShippingDate).format("YYYY-MM-DD") : null
    };
    await fetch('/api/submit-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(submitData)
    });
    // 提交后的逻辑，比如提示成功
  };

  return (
    <Form>
      <Form.Item label="预计发货日期">
        <DatePicker
          value={formData.estimatedShippingDate ? (dayjs(formData.estimatedShippingDate).isValid() ? dayjs(formData.estimatedShippingDate) : null) : null}
          onChange={handleShippingDateChange}
          style={{ width: "100%" }}
        />
      </Form.Item>
      <Button type="primary" onClick={handleSubmit}>保存修改</Button>
    </Form>
  );
};

export default EditForm;

四、必做的前置配置 #

别忘了在项目入口文件（比如App.js或者main.jsx）里把Day.js配置为AntD的默认日期库，否则DatePicker可能会用原生Date对象，导致和Day.js不兼容：

import { ConfigProvider } from 'antd';
import dayjs from 'dayjs';
import zhCN from 'antd/locale/zh_CN'; // 可选，设置中文语言

ConfigProvider.config({
  locale: zhCN,
  dateLocale: dayjs,
});

// 然后渲染你的App
ReactDOM.createRoot(document.getElementById('root')).render(
  <ConfigProvider>
    <App />
  </ConfigProvider>
);

备注：内容来源于stack exchange，提问作者malfoy