反應日期選擇器和時刻

Question

大家晚上好，我對反應日期選擇器和時刻有點問題。 我已經格式化了日期和時刻，但仍然收到 UTC 錯誤。 即使我的道具正在顯示並且孩子們正在從父母那里初始化日期仍然是錯誤的格式，而且我從中獲取數據的 API 正在使用YYYY-MM-DD格式的日期。

我已經用時刻和反應日期選擇器完成了我所知道的關於日期和時間格式的所有工作。 當我使用普通表單時，一切正常，但日期選擇器有問題..我可以毫無問題地獲取數據。 我希望用戶能夠使用應用程序選擇不同的日期或隨機選擇。 為了更清楚，我附上了一些屏幕截圖。 謝謝。

        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

使用 moment API 將日期選擇器輸出轉換為您需要的格式。

像這樣：moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')

Answer 2

也可以使用日期選擇器格式

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

如果你想在函數內部轉換日期可以使用下面的代碼

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