javascript - react-datepicker, issue with monthsShown by default - Stack Overflow

admin管理员组

文章数量:1289753

We are using react-datepicker for our calendar implementation. the default months shown is controlled by monthsShown datepicker ponent 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.

We are using react-datepicker for our calendar implementation. the default months shown is controlled by monthsShown datepicker ponent 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.

• javascript
• reactjs
• react-native
• react-redux
• react-datepicker

Share Improve this question Follow edited Apr 4, 2019 at 21:41 Hero asked Apr 4, 2019 at 21:28 HeroHero 64744 gold badges1414 silver badges3636 bronze badges 3

• 1 I have the same problem, since I'm using the current day as maxDate. Maybe a feature request? – Xizam Commented Apr 5, 2019 at 13:32
• 1 Opened an issue: github./Hacker0x01/react-datepicker/issues/1697 – Xizam Commented Apr 5, 2019 at 13:38
• @Xizam Thanks !! – Hero Commented Apr 5, 2019 at 18:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Unfortunately, looking at the source code of the ponent 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.

Yes, it's possible to display the bination 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./#example-show-previous-months

本文标签： javascriptreactdatepickerissue with monthsShown by defaultStack Overflow