CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxreact-datepicker
Hero
Hero

Reputation: 647

react-datepicker, issue with monthsShown by default

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.

Upvotes: 4

Views: 9464

Answers (2)

sumit verma
sumit verma

Reputation: 41

Yes, it's possible to display the combination of the current month and the previous month.

try providing these two values:

showPreviousMonths = true and monthsShown = 2

<DatePicker
  selected={startDate}
  showPreviousMonths
  onChange={date => setStartDate(date)}
  monthsShown={2}
/>

https://reactdatepicker.com/#example-show-previous-months

Upvotes: 4

etarhan
etarhan

Reputation: 4176

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.

Upvotes: 4

Related Questions