如何使用反應中的下一個和上一個按鈕將日期增加和減少1天？

Question

我想使用下一個和上一個按鈕在下一個日期和上一個日期做出反應。

我已經嘗試通過創建兩個按鈕“下一個”和“上一個”按鈕，但是當月份開始和結束時它無法正常工作。

這些是按鈕：

<button onClick={() => this.previousDate(this.state.selectdate)} 
>Previous</button><input type="text" name="selectdate" id="reactroot" 
newdate={this.state.selectdate} value={this.state.selectdate} /> 
<button onClick={() => this.nextDate(this.state.selectdate)}>Next</button>

這是我獲取以前日期的功能：

previousDate(datetime) {
        var months_arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var getselectdate = datetime;
        var date = new Date(getselectdate); //Current Date
        var month = months_arr[date.getMonth()];
        var year = new Date().getFullYear(); //Current Year
        var day = date.getDate() - 1;
        var compdataTime = month + '-' + day + '-' + year;
        // now convert new date in timestamp
        var datenew = new Date(compdataTime); //Current Date
        var finaldate = datenew.getTime() / 1000;

        console.log(finaldate)

        this.setState({ selectdate: compdataTime });

        this.getDetailsBydatePrevious();
    }

它的工作正常，但在月底​​和月初它不工作。

Answer 1

為了獲得更准確的更新，我們可以按日期值（以毫秒為單位）更改日期。 考慮此沙箱和以下代碼： https : //codesandbox.io/s/gallant-euler-67w40

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    selectedDate: null
  };

  componentDidMount() {
    this.setDate();
  }

  setDate = (newDate) => {
    const date = newDate || new Date();
    this.setState({
      selectedDate:
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
    });
  };

  getPreviousDate = () => {
    const { selectedDate } = this.state

    const currentDayInMilli = new Date(selectedDate).getTime()
    const oneDay = 1000 * 60 *60 *24
    const previousDayInMilli = currentDayInMilli - oneDay
    const previousDate = new Date(previousDayInMilli)

    this.setDate(previousDate)

  }

  getNextDate = () => {
    const { selectedDate } = this.state

    const currentDayInMilli = new Date(selectedDate).getTime()
    const oneDay = 1000 * 60 *60 *24
    const nextDayInMilli = currentDayInMilli + oneDay
    const nextDate = new Date(nextDayInMilli)

    this.setDate(nextDate)

  }

  render() {
    return (
      <div>
        <h3>Date: {this.state.selectedDate}</h3>
        <button onClick={this.getPreviousDate}>Previous</button>
        <button onClick={this.getNextDate}>Next</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

const myDate = new Date()

myDate.setDate(myDate.getDate() - 1)

這會減少一天，但是建議您使用luxon之類的庫作為日期