Как увеличить и уменьшить дату на 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 для дат