CODEWITHSUNDEEP
javascriptreactjsreact-nativedatepicker
hisusu32
hisusu32

Reputation: 447

React DatePicker change default start date

I'm using https://reactdatepicker.com/ .

Right now the default start date is the current date. I want the start date to be +45 days in advance. The calendar does not need to disable any dates from current to 44 days, I just want the calendar to select that day initially.

This is my current code: 

this.state = {
    startDate: new Date(),
}

handleChangeDate = date => {
    this.setState({
      startDate: date
    });
};

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChangeDate}
/>

I tried something like this to no success, I couldn't find any props in their documentation to do this.

handleChangeDate = date => {
    const Newdate = new Date();
    date.setDate(date.getDate() + 45);
    this.setState({
      startDate: Newdate,
    });
};

Upvotes: 1

Views: 9677

Answers (1)

Ayushya
Ayushya

Reputation: 1920

You should set the Date +45 as the initial Date itself. Selected property is used for initial initalization only

class MyComponent extends React.Component {
    constructor () {
      const newdate = new Date();
      newdate.setDate(newdate.getDate() + 45);
      this.state = {
        startDate: newdate,
      }
    }

    handleChangeDate = date => {
        this.setState({
          startDate: date
        });
    };
    render () {
      return (
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChangeDate}
        />
      )
    }
  }

Upvotes: 1

Related Questions