当我使用react.js传递到mysql数据库时，我在更改日期格式时遇到问题

Question

大家好，我使用 moment(donors.donateDate).format('DD-MM-YYYY') 将输入的日期设置为 dd/mm/yyy 格式 但是，当单击提交按钮时，它会在控制台中显示此错误。 指定的值“23-03-2022”不符合要求的格式“yyyy-MM-dd”。

这是我的代码：-

import { TextField } from '@material-ui/core';
import moment from 'moment';

export default function DonorForm ({showForm})  {

  const [donors, setDonors] = useState({
    donateDate: ""
  });

  let name, value;
  const handleInputs = (e) => {
    console.log(e);
    name = e.target.name;
    value = e.target.value;
  
    setDonors({...donors, [name]: value });
  };

  // For changing date format in TextFeild.
  const newDate1 = moment(donors.donateDate).format('DD-MM-YYYY')
  console.log(newDate1)

  const onclick = async (e) => {
    const {donateDate } =
    donors;

        const config = {
          header: {
            "Content type": "appication/json",
          },
        };
        setLoading(true);

        const { data } = await axios.post(
          "http://localhost:4000/donorsform",
          {  
            donateDate
          },
          config
        );

        console.log(data);
        localStorage.setItem("donorsInfo", JSON.stringify(data));
        navigate("/coordinators/myprojects");
  };
  return(
    <>
                  <div className="card-header ">
                    <h3 className="card-title my-1">Donor Details</h3>
                  </div>
                  <form 
                    onSubmit={handleSubmit(onclick)}
                    method="POST"
                    className="form-horizontal "
                    id="register-form"
                  >
                    <div className="card-body">     
                      <div className="row">
                      <div className="form-group">
                          <label className="form-label col">Date</label>
                          <div>

                            <TextField
                              onChange={handleInputs}
                              id="donateDate"
                              type="date"
                              className="form-control col-12 mx-1"
                              name="donateDate"
                              value={newDate1}
                            />
                            
                          </div>
                        </div> 

                      </div>
                    </div>
                    <div className="card-footer">
                      <button type="submit" className="btn-hover-1 color-3">
                        Submit
                      </button>
                    </div>
                  </form>
    </>
  );
};

最后，我还想做的是，如果用户访问此表单，“donateDate”字段默认显示当前日期。

Answer 1

您的后端预期日期，格式为 YYYY-MM-DD
所以你可以这样做，如下所示

const newDate1 = moment(donors.donateDate).format('YYYY-MM-DD')