React Date Picker and Moment

Question

Good evening everyone, I'm kinda having issue with react date picker and moment. I've formatted the date and moment still I'm getting a UTC error. Even though my props is showing and the children are getting initialize from the parent the date still in a wrong a format and the API I"m getting the data from is using YYYY-MM-DD format of date.

I've done all I know about date and time formatting both with moment and react date picker. When I use ordinary form everything works fine but the date picker is having issue..I can fetch data without no issue. I want the user to be able to choose a different date with the app or choose at random. I've attached some screenshot for more clarity. Thanks.

        import React, { useState, useEffect } from "react";
        import axios from "axios";
        // import "./App.css";
        import moment from "moment";
        import styled from "styled-components";
        import DatePicker from "react-datepicker";
        import DisplayImg from "./components/DisplayImg"


        const ApodImg = styled.div`
        display:flex;
        object-fit:scale;
        padding-top 1rem;
        margin-bottom:1rem;
        width:80%;
        `;

        function App() {
          const [nasa, setNasa] = useState([]);

          const [curDate, setCurDate] = useState("")

          //  function changeDate(e) {[enter image description here][1]
          //   //disable button to avoid spamming
          //   e.target.setAttribute('disabled', true);
          //   //sets the value of what was picked on the input
          //   setCurDate(e.target.value);


          //  }

          // let newDate = new Date()
          // let year = newDate.getFullYear().toString()
          // let month = (newDate.getMonth() + 1).toString().padStart(2, '0')
          // let day = newDate.getDate().toString()
          // //format for api use, needs 2 digit month and day always
          // let formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(
          //    2,
          //    '0'
          // )}`


          function change(e) {
            // disable button to avoid spamming
            e.target.setAttribute('disabled', true);
            // sets the value of what was picked on the input
            setCurDate(e.target.value);
          }

          // grabbing new (current) date
          let newDate = new Date()
          // grabbing the year from newDate above this
          let year = newDate.getFullYear().toString()
          // grabbing month from newDate adding 1 because JS numbers start at 0
          // turning it into a string. padStart places a 0 in front of the month since the current month is 1 digit
          let month = (newDate.getMonth() + 1).toString().padStart(2, '0')
          // grabbing day from newDate and turning it into a string
          let day = newDate.getDate().toString()
          //format for api to use, needs 2 digit month and day always (YYYY-MM-DD)
          let formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(
            2,
            '0'
          )}`

          // setting setStartDate to formattedDate.toString()
          const [startDate, setStartDate] = useState(formattedDate.toString());

          useEffect(() => {
            const fetchData = () => {

            axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j`)
              .then(res => {
                // setNasa(res.data)

                console.log(res)
              })

              .catch(error => {
                console.log("the data was requested", error)
              })

            }
            fetchData()

          }, [])

          useEffect(() => {
            const getPhoto = date => {
              axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j&date=${startDate}`)

                .then(response => {
                  console.log(response)
                })

                .catch(error => {
                  console.log("The data was requested", error)
                })

            }
          }, [formattedDate])




          return (
            <ApodImg >

              <DatePicker selected={startDate} title='Pick a Date to View Another Image' onChange={e => change(e)} type='date' />
              <DisplayImg data={nasa} />
            </ApodImg>
          );
        }

        export default App;

Answer 1

Use the moment API to convert the date picker output to the format you need.

Like this: moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')

Answer 2

can use datepicker format as well

 <DatePicker format={"DD/MM/YYYY"} value={this.state.date}  onChange={this.onChange}/>

If you want to convert the date inside function can use below code

 let formatedDate = moment(this.state.date).format('YYYY-MM-DD');