React中DatePicker设置format后提交的日期仍是ISO格式怎么办？

react-datepicker的format属性确实只影响显示，实际值还是Date对象。想提交格式化后的日期得自己处理，比如用moment或date-fns转成想要的格式。比如用moment(startDate).format('YYYY-MM-DD')来获取字符串。

你遇到的问题确实挺典型的，根本原因是react-datepicker组件的format属性只影响界面显示格式，并不会改变实际存储的日期对象。也就是说，不管你设置了什么format，内部的startDate状态依然是一个标准的JavaScript Date对象，而它的默认字符串化方式就是ISO格式。

要解决这个问题，你需要在提交表单时手动将Date对象格式化成你需要的字符串格式，而不是直接用toISOString()方法。下面我详细说一下解决方案：

### 1. 引入日期处理库
最简单的方式是使用一个日期处理库，比如dayjs或者moment（虽然moment有点重）。这里以dayjs为例，因为它轻量且功能强大。

先安装dayjs：

npm install dayjs

### 2. 修改代码逻辑
我们需要在表单提交时对日期进行格式化，而不是直接用toString()或toISOString()。

下面是完整的代码示例：

import React, { useState } from 'react';

import DatePicker from 'react-datepicker';

import dayjs from 'dayjs'; // 引入dayjs



// 创建一个自定义hook来格式化日期

function formatDate(date, formatString = 'DD/MM/YYYY') {

  if (!date) return ''; // 如果没有日期，返回空字符串

  return dayjs(date).format(formatString); // 使用dayjs格式化日期

}



function MyForm() {

  const [startDate, setStartDate] = useState(new Date());



  const handleSubmit = (e) => {

    e.preventDefault(); // 阻止表单默认提交行为



    // 格式化日期为"dd/MM/yyyy"格式

    const formattedDate = formatDate(startDate, 'DD/MM/YYYY');

    console.log('提交的日期:', formattedDate); // 这里会打印类似"05/01/2024"

    

    // 然后你可以把formattedDate发送到服务器

  };



  return (

    <form onSubmit={handleSubmit}>

      <DatePicker

        selected={startDate}

        onChange={(date) => setStartDate(date)}

        dateFormat="dd/MM/yyyy" // 注意这里是dateFormat而不是format

        showTimeSelect

      />



      <button type="submit">提交</button>

    </form>

  );

}



export default MyForm;

### 3. 解释为什么这样做
- react-datepicker 的 dateFormat 属性只是控制输入框中显示的日期格式，并不会改变你传入的 Date 对象。
- JavaScript 的 Date 对象本质上是一个时间戳，它本身的字符串表示形式是 ISO 格式的。所以如果你直接打印 startDate，就会看到 ISO 格式的字符串。
- 使用 dayjs 或类似的库可以让你灵活地将日期对象格式化成任何你需要的字符串格式。

### 4. 其他注意事项
- 如果你觉得引入外部库太麻烦，也可以自己写一个简单的格式化函数，不过这样可能会让代码变得冗长且不够优雅。
- 确保你的服务器端能够正确解析前端发过去的日期字符串格式。例如，如果前端发过去的是 "05/01/2024"，后端需要知道这是日/月/年的格式。

这样改完之后，表单提交时输出的日期就是用户看到的格式了，问题完美解决！