Ant Design DatePicker带时间选择存入数据库时间为00:00:00及clone报错问题

1. Uncaught TypeError: date.clone is not a function报错的核心原因：antd的DatePicker组件的value属性要求传入moment（v4及之前版本默认）/dayjs（v5版本默认）类型的日期对象，你在onOk回调中直接将format生成的日期字符串存入pickedFrom，再将字符串传给组件的value属性，组件内部操作日期时需要调用日期对象的clone方法，字符串不存在该方法，因此抛出类型错误。
2. 之前存入数据库时间为00:00:00的原因：你之前未做格式化时直接将日期对象传给后端，后端接收或序列化过程中只保留了年月日部分，丢弃了时间信息。

不要提前将日期格式化后存入state，state中直接存储原生日期对象，仅在发送请求给后端时再做格式化即可，修改两处代码：

1. 修改DatePicker组件逻辑 #

去掉onOk中的格式化操作和多余参数，直接存储日期对象：

<DatePicker
  allowClear={false}
  placeholder="Rent from: "
  disabledDate={disabledDate}
  onChange={(e) => onDateClear(e, "from")}
  onOk={(date) => setPickedFrom(date)}
  value={pickedFrom}
  showTime
  className="date-picker2"
/>

pickedUntil对应的另一个DatePicker组件也做相同修改。

2. 修改createRent请求逻辑 #

发送请求时再将日期对象格式化为数据库支持的字符串格式：

const createRent = () => {
  axios
    .post("http://localhost:5000/rents/createRent", {
      date_from: pickedFrom ? pickedFrom.format('YYYY-MM-DD HH:mm:ss') : null,
      date_to: pickedUntil ? pickedUntil.format('YYYY-MM-DD HH:mm:ss') : null,
      userId: user.id,
      itemId: currentItem.id,
    })
    .then(() => {
      showNotification("Item rented");
      setCurrentItem({});
      setDifference(null);
      setIsModalVisible(false);
      setPickedFrom(null);
      setPickedUntil(null);
    })
    .catch((e) => {
      showNotification(e.response.data.message, "error");
    });
};

如果你使用的是antd v5版本，默认日期库为dayjs，操作逻辑完全一致，仅需确认你的日期对象为对应库的实例即可，format方法的使用方式没有区别。

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