react-datepicker, issue with monthsShown by default

Question

We are using react-datepicker for our calendar implementation. the default months shown is controlled by monthsShown datepicker component property. when we say 2- it shows Current Month + Next Month.

I am using the reat DatePicker as below

<DatePicker 
  customInput={<CustomInput disableDateSelection={this.props.dateProps.disableDateSelection} />}
  className="w-dtsr-date-picker"
  selected={this.state.startDate}  //called when the date is clicked 
  onChange={this.handleChange}    //called only when the value is chnaged 
  monthsShown={2}     //number of months to be shown 
  minDate={this.props.dateProps.minDate}  //min days to be shown in the calendar 
  maxDate={this.props.dateProps.maxDate}  //max days to be shown in the calendar 
  onChangeRaw={this.handleDateChangeRaw}  //preventing the user from manually entering the dates or text in the input text box 
  dayClassName={date => date.getTime() === new Date(this.props.dateProps.defaultDate).getTime() && this.props.dateProps.disableDefaultDate ? 'random' : undefined}
  //dayClassName - to disable the proposed forecast dates or actual dates if user has already selected/proposed the same forecast/actual dates
  disabled={this.props.dateProps.disableDateSelection}
/>

Is there a way to show Previous month and this month.? For Example if the current Month is April we wanted to show March and April instead of April - May.

Answer 1

Unfortunately, looking at the source code of the component in the react-datepicker repo it would seem that it will always show the current month and some number of months after, controlled by the monthsShown property. Don't think there is a way to get it to do what you want other than forking the github repo and adding the functionality yourself (or submit a feature request). The problem piece in question:

calendar.jsx

var monthList = [];
for (var i = 0; i < this.props.monthsShown; ++i) {
  var monthsToAdd = i - this.props.monthSelectedIn;
  var monthDate = addMonths(this.state.date, monthsToAdd);
  var monthKey = `month-${i}`;

The monthsShown property controls which months are shown and it defaults to 1. In order to get it to do what you want, a flag could be added to reverse the addition of months and have it subtract instead.