时间戳

首页 > 解决方案 > 为什么我的日期输入让我回到反应前一天

reactjs - 为什么我的日期输入让我回到反应前一天

问题描述

我正在尝试提交一个带有输入的日期，但是当我提交它时，我又回到了前一天

这是我的以下代码：

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [date, setDate] = useState(new Date());
  const [timestart, setTimeStart] = useState();
  const [timeend, setTimeEnd] = useState();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const payload = {
      title,
      description,
      date,
      timestart,
      timeend,
      teamId: teamId,
    };

    const res = await axios.post("/api/v1/events/event", payload);

    location.reload();
    setShowCalendarCard(false);
  };

  return (
    <div className="calendar-card-container">
      <div className="calendar-card-event-date">
        <input
          type="date"
          name="date"
          onChange={(e) => setDate(e.target.value)}
        />
      ...
       );

当我输入 2021 年 5 月 10 日，然后当我点击提交时，它让我回到 2021 年 5 月 9 日。我怎样才能解决这个问题？

我认为问题出在时区上。示例：当我输入日期时，输入的日期是 05/01/2021，然后点击提交。

然后我返回我的 postgres 数据库，它显示了 2021 年 4 月 30 日。所以基本上它在前一天倒退。

更新的事件后端模型：

这是我的事件模型：

"use strict";
module.exports = (sequelize, DataTypes) => {
  const Events = sequelize.define(
    "Events",
    {
      id: {
        allowNull: false,
        primaryKey: true,
        defaultValue: DataTypes.UUIDV4,
        type: DataTypes.UUID,
      },
      title: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      description: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      date: {
        type: DataTypes.DATE,
        allowNull: false,
      },
      timestart: {
        type: DataTypes.TIME,
        allowNull: false,
      },
      timeend: {
        type: DataTypes.TIME,
        allowNull: false,
      },
    },
    { tableName: "Events", timestamps: true }
  );
  Events.associate = function (models) {
    Events.belongsTo(models.Team, {
      foreignKey: "teamId",
    });

    Events.belongsTo(models.User, {
      foreignKey: "creatorId",
    });
  };
  return Events;
};

谢谢你帮助我。

标签： reactjs

解决方案

这实际上让你倒退了一个月。基本上，这个日期函数返回月份从 0 开始到 11 结束的月份。所以一月是 0，二月是 1，依此类推。因此，您必须检索月份并将其增加一。您可以从此处获取 JavaScript date() 函数参考。https://www.w3schools.com/js/js_date_methods.asp。

您还可以查看此链接https://www.w3schools.com/js/tryit.asp?filename=tryjs_date_getmonth他如何将一个数字添加到 getMonth() 方法返回的月份。

推荐阅读