i have a problem to change the format of date when i am passing to mysql db using react.js

Question

Hello guys, I set my entered date to dd/mm/yyy format using moment(donors.donateDate).format('DD-MM-YYYY') But when click on submit button it shows this error in console. The specified value "23-03-2022" does not conform to the required format, "yyyy-MM-dd".

this is myCode:-

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>
    </>
  );
};

And in the end, I also want to do if user visit this form the 'donateDate' field shows current date by default.

Answer 1

your backend expecting date in the form YYYY-MM-DD
So you can do like this as shown below

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