Issue formatting the date

Question

I'm struggling with the following problem: I'm using react-dropdown-date and I have an issue formatting the selected date to format "YYYY-MM-DD". My code is the following:

formatDate.js

// formats date to 'yyyy-mm-dd'
const formatDate = (day, month, year) => {
  var d = new Date(day, month, year),
    month = "" + (d.getMonth() + 1),
    day = "" + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) {
    month = '0' + month;
  } 
  if (day.length < 2) {
    day = '0' + day;
  }

  return [year, month, day].join('-');
}

export default formatDate;

and the component is the following:

import React, { useState, useEffect } from "react";
import { YearPicker, MonthPicker, DayPicker } from "react-dropdown-date";
import formatDate from "./formatDate";
import "./styles.scss";

const DOB = () => {
  const [date, setDate] = useState({ year: null, month: null, day: null });
  const [selectedDate, setSelectedDate] = useState(null);

  // useEffect(() => {
  //   setSelectedDate(formatDate(date.day, date.month, date.year));
  // }, [date]);
 
  console.log('selectedDate', selectedDate);
  console.log(date.day, date.month, date.year);
  return (
    <div className="dob__main-container">
      <div>
        <DayPicker
          classes={"dob__day"}
          defaultValue={"DD"}
          year={date.year} // mandatory
          month={date.month} // mandatory
          endYearGiven // mandatory if end={} is given in YearPicker
          required={true} // default is false
          value={date.day} // mandatory
          onChange={day => {
            // mandatory
            setDate({ day });
            console.log(day);
          }}
          id={"day"}
          name={"day"}
        />
        <MonthPicker
          classes={"dob__month"}
          defaultValue={"MM"}
          endYearGiven // mandatory if end={} is given in YearPicker
          year={date.year} // mandatory
          required={true} // default is false
          value={date.month} // mandatory
          onChange={month => {
            // mandatory
            setDate({ month });
            console.log(month);
          }}
          id={"month"}
          name={"month"}
        />
        <YearPicker
          classes={"dob__year"}
          defaultValue={"YYYY"}
          start={1901} // default is 1900
          end={new Date().getFullYear()} // default is current year
          reverse // default is ASCENDING
          required={true} // default is false
          value={date.year} // mandatory
          onChange={year => {
            // mandatory
            setDate({ year });
            console.log(year);
          }}
          id={"year"}
          name={"year"}
        />
      </div>
    </div>
  );
};

export default DOB;

I'm using the example from documentation, but I can't get to format the selected date as I need to (YYYY-MM-DD). The formatDate method is not working. I think it must be implemented in another way. Maybe someone with experience using this package can help me solve this issue.

The values are 1, 1, 2001 for day, month, year. All strings.

Does this answer your question? [How to format a JavaScript date?](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Heretic Monkey, Jun 15 '21 at 13:02
@HereticMonkey I'm not quite sure I understand. So currently, my selected date from the component is day = D month = M and year ok. The method is not working.. how can I implement the method so that it formats the date to yyyy-mm-dd ? — Katerin1122, Jun 15 '21 at 13:17
The `Date` constructor takes `year`, `month` (zero indexed), `day`. — Heretic Monkey, Jun 15 '21 at 13:19
Is not working, I tried to modify the formatDate.js method as follows ```const dateFormat = new Date(year, month, day).toISOString().substring(0, 10);``` — Katerin1122, Jun 15 '21 at 13:29
"is not working" is not very descriptive. Also, what are the values of `year`, `month`, and `day`. Please [edit] your question in response. — Heretic Monkey, Jun 15 '21 at 13:33
Sorry, I forgot to write the error message: "Invalid time value" — Katerin1122, Jun 15 '21 at 13:35

Sparrow · Answer 1 · 2021-06-15T13:31:08.823

-1

Try this function it might help you!

const formatDate = (date) => {
    date = new Date(date);
    if(date == 'Invalid Date') return date;
    let month = date.getMonth();
    let day = date.getDate();
    return `${date.getFullYear()}-${day<10?'0':''}${day}-${month<10?'0':''}${month+1}`;
}

export default formatDate;

edited Jun 15 '21 at 13:31

answered Jun 15 '21 at 13:27

Sparrow

280
1
12

but formatDate method must take as params ```day```,```month```,```year``` – Katerin1122 Jun 15 '21 at 13:31
No problem you can send three params in a single string param Ex: formatDate('15 june 2021'); – Sparrow Jun 15 '21 at 13:34
That would be a bad idea. Strings with dates in formats other than certain formats may not be parsed correctly (see [Why does Date.parse give incorrect results?](https://stackoverflow.com/q/2587345/215552)). – Heretic Monkey Jun 15 '21 at 13:38

Issue formatting the date

1 Answers1