ReactJS Datepicker - I want the datepicker to start from this month and on only

Question

How can I make that ReactJS Datepicker should only display days starting from this month and on (no back dates).

Answer 1

This is not exactly what I was trying to do but its a quick fix.

I use the includeDates={this.state.includeDates} from ReactJS Datepicker

and I made a custom function to print out the days starting from today and i save it in an array that i then pass to the react state excludeDates: [''], and only those days will be clickable.

let fromDate = moment();
let toDate = moment().add(24, 'months'); //including only days starting from today untill 2 year
            for (let i = 0; i < moment(toDate).diff(fromDate, 'days') + 1; i++) {
                state.includeDates.push(moment(fromDate).add(i, 'days'));

} 

Thanl you! hope it helps someone.

Answer 2

You can use moment startOf using 'month' parameter to get the first day of the month and pass it to minDate option to make the datepicker enable only dates from the start of the current month:

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
  minDate={moment().startOf('month')}
/>

If you want to enable only future dates, simply remove maxDate option from the linked example, you can use the following code:

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
  minDate={moment().startOf('day')}
/>