CODEWITHSUNDEEP
javascriptreactjsdate
Anurag Mishra
Anurag Mishra

Reputation: 699

How to increment and decrement date by 1 day using next and previous button in react?

I want to next date and previous date using next and previous button in react.

I have tried by creating two buttons Next and previous button but it's not working properly when the month starts and ends..

These are buttons :

<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>

and this is my function to get previous date : 

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();
    }

Its working fine but at the end of month and starting of month it's not working.

Upvotes: 0

Views: 5314

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

For a more accurate update, we could change the dates by their values in milliseconds. Consider this sandbox and the code below: 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);

Upvotes: 1

cradapyx
cradapyx

Reputation: 283

const myDate = new Date()

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

this decrement the day, however an advice is to use a library like luxon for the dates

Upvotes: 0

Related Questions