Issues setting date

Question

I have problems setting the date. From what I see, it only sets the correct day, but not the month and the year. I'm not getting what I'm doing wrong here.

Here is my code:

formatDate.js

// formats date to 'yyyy-mm-dd'
const formatDate = (date) => {
  var d = new Date(date),
    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:

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

const DOB = () => {
  const [day, setDay] = useState('');
  const [month, setMonth] = useState('');
  const [year, setYear] = useState('');
  const [selectedDate, setSelectedDate] = useState('');

  useEffect(() => {
    setSelectedDate(formatDate(day, month, year));
    
  }, [day, month, year]);
 console.log('formatDate===', formatDate(day, month, year))
 console.log('selectedDate', selectedDate);
  
  // console.log(day, month, year);
  
  return (
    <div className="dob__main">
      <div>
        <DayPicker
          classes={"dob__day"}
          defaultValue={"DD"}
          year={year}
          month={month}
          endYearGiven
          required={true}
          value={day}
          onChange={day => {
            setDay(day);
            console.log(day);
          }}
          id={"day"}
          name={"day"}
        />
        <MonthPicker
          classes={"dob__month"}
          defaultValue={"MM"}
          endYearGiven 
          year={year}
          required={true} 
          value={month}
          onChange={month => {
            setMonth(month);
            console.log(month);
          }}
          id={"month"}
          name={"month"}
        />
        <YearPicker
          classes={"dob__year"}
          defaultValue={"YYYY"}
          start={1901} 
          end={new Date().getFullYear()} 
          reverse 
          required={true} 
          value={year} 
          onChange={year => {
            setYear(year);
            console.log(year);
          }}
          id={"year"}
          name={"year"}
        />
      </div>
    </div>
  );
};

export default DOB;

I'm using npm react-dropdown-date and followed the example from their documentation. Maybe I'm using the useState or UseEffect hooks wrong? Maybe someone with experience with React and dates cand help me solve this issue.

Answer 1

This was the best I could do without changing much of your code. I have added a condition to only update the selectedDate state only when all the three day, month and year are selected.

The library you are using returns back the month starting with index - 0, so I have also incremented by 1 to get the correct month number in the formatDate method.

function App() {
    const [day, setDay] = useState('');
    const [month, setMonth] = useState('');
    const [year, setYear] = useState('');
    const [selectedDate, setSelectedDate] = useState('');

    const formatDate = (d, m, y) => {
        let day = d, month = (parseInt(m) + 1).toString(), year = y;
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        return ([year, month, day].join('-'))
    }
    useEffect(() => {
        if (day && month && year) {
            setSelectedDate(formatDate(day, month, year));
        }
    }, [day, month, year]);

    const onDayChange = (day) => {
        setDay(day);
    };

    const onMonthChange = (month) => {
        setMonth(month);
    };

    const onYearChange = (year) => {
        setYear(year);
    };

    console.log('---selectedDate ----', selectedDate);

    return (
        <div className="dob__main">
            <div>
                <DayPicker
                    defaultValue={"DD"}
                    year={year}
                    month={month}
                    endYearGiven
                    value={day}
                    onChange={onDayChange}
                    id={"day"}
                    name={"day"}
                />
                <MonthPicker
                    defaultValue={"MM"}
                    endYearGiven
                    year={year}
                    value={month}
                    onChange={onMonthChange}
                    id={"month"}
                    name={"month"}
                />
                <YearPicker
                    defaultValue={"YYYY"}
                    start={1901}
                    end={new Date().getFullYear()}
                    reverse
                    value={year}
                    onChange={onYearChange}
                    id={"year"}
                    name={"year"}
                />
            </div>
        </div>
    );
};

export default App;