title: I keep getting inconsistent date formats with React Date Picker
body: <p>I'm creating a simple expenses fullstack react app. In this app, users enter a description, amount, and date for a particular expense item. This expense item or the "Budget" state is saved in the back-end. Now, whenever the user loads the page, a GET request is made to retrieve "Budget" and is outputted to a table and a line graph.</p>
  
  <p>The issue is when the user inputs their date it is formatted like this: </p>
  
  <pre><code>Sun May 24 2020 14:53:20 GMT-0400 (Eastern Daylight Time)
  </code></pre>
  
  <p>When the date is posted to the back-end and retrieved to the UI, it looks like this: </p>
  
  <pre><code>2020-05-24T04:56:12.000Z
  </code></pre>
  
  <p>I reformat the date retrieved from the back-end to this: <code>DD-MM-YYYY</code>. However, when the user submits the date it will look like this <code>ay 24</code>. Now, if the user refreshes the page it will reformat to what I want (i.e. <code>DD-MM-YYYY</code>). So, the date format looks incorrect until the page is refreshed. </p>
  
  <p>Here is the MongoDB model for budget:</p>
  
  <pre><code>const budgetSchema = mongoose.Schema(
    {
      desc: {
        type: String,
      },
      amount: {
        type: Number,
      },
      date: {
        type: Date,
      },
    },
    { timestamps: true }
  );
  </code></pre>
  
  <p>Here is the full code: </p>
  
  <pre><code>
  import "react-datepicker/dist/react-datepicker.css";
  
  
  export default function Budget() {
    const [Balance, setBalance] = useState([0]);
    const [Income, setIncome] = useState(0);
    const [Expense, setExpense] = useState(0);
  
    const [Input, setInput] = useState([]);
    const [Description, setDescription] = useState("");
  
    const [startDate, setStartDate] = useState(new Date());
  
    const [Budget, setBudget] = useState([]);
  
    const [loadingBudget, setloadingBudget] = useState(true);
  
    useEffect(() =&gt; {
      axios
        .get("API Path")
        .then((response) =&gt; {
          if (response.data.success) {
            // console.log(JSON.stringify(response.data, null, 2));
            setBudget([...Budget, ...response.data.budget]);
          } else {
            alert("Failed to get save Budget");
          }
        });
      setloadingBudget(false);
    }, []);
  
    const dates = Budget.sort(function (a, b) {
      var dateA = new Date(a.date),
        dateB = new Date(b.date);
      return dateA - dateB;
    }).map((i) =&gt; {
      return (
        i.date.toString().substring(5, 10) +
        "-" +
        i.date.toString().substring(0, 4)
      );
    });
  
    const charges = Budget.map((i) =&gt; {
      return i.amount;
    });
  
  
    const handleChange = (e) =&gt; {
      setInput(e.target.value);
    };
  
    const handleDate = (date) =&gt; {
      setStartDate(date);
    };
  
    const handleDescription = (e) =&gt; {
      setDescription(e.target.value);
    };
  
    const handleClick = (e) =&gt; {
      e.preventDefault();
      if (Input &gt; 0) {
        setIncome(Input);
      } else {
        setExpense(Input);
      }
      let val = parseInt(Input, 10);
      setBalance([...Balance, val]);
      setBudget([
        ...Budget,
        {
          desc: Description,
          amount: val,
          date: startDate,
        },
      ]);
      const variable = {
        desc: Description,
        amount: val,
        date: startDate,
      };
      axios
        .post("API Path", variable)
        .then((response) =&gt; {
          if (response.data.success) {
            console.log(response.data);
            setInput("");
            setDescription("");
            setStartDate("");
          } else {
            alert("Failed to save Budget");
          }
        });
    };
  
    return (
      &lt;React.Fragment&gt;
  
        &lt;div style={{ backgroundColor: "#f2f2f2" }}&gt;
          &lt;div&gt;
            &lt;br /&gt;
            &lt;BudgetForm
              Description={Description}
              handleDescription={handleDescription}
              Input={Input}
              handleChange={handleChange}
              startDate={startDate}
              handleDate={handleDate}
              handleClick={handleClick}
            /&gt;
          &lt;/div&gt;
          {!loadingBudget &amp;&amp; &lt;Chart dates={dates} charges={charges} /&gt;}
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  
  <p>I'm assuming that the answer deals with how startDate is initialized to new Date(). This would mean that it is formatted to what I don't want. Therefore, I would suspect that if I format startDate before it is sent to the back-end, it should work correctly? I know from previous stackoverflow questions a solution like this would work: </p>
  
  <pre><code>var d = new Date ()
  var curr_date = d.getDate();
  var curr_month = d.getMonth() + 1; 
  var curr_year = d.getFullYear();
  console.log(curr_month + "-" + curr_date + "-" + curr_year);
  </code></pre>
  
  <p>However, I'm not sure where I could implement this. Any suggestions would be great!</p>