React-datepicker, проблема с месяцамиПо умолчанию

Мы используем react-datepicker для реализации нашего календаря. отображаемые месяцы по умолчанию управляются средством выбора даты месяцевПоказано свойство компонента. когда мы говорим 2-, он показывает текущий месяц + следующий месяц.

Я использую реальный DatePicker, как показано ниже

<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.handleChangeEvent}    //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}
/>

Есть ли способ показать предыдущий месяц и этот месяц? Например, если текущий месяц — апрель, мы хотели показать март и апрель вместо апреля — мая.

У меня та же проблема, так как я использую текущий день как maxDate. Может быть, запрос функции?

Xizam 05.04.2019 15:32

@Xizam Спасибо !!

Hero 05.04.2019 20:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
3
4 300
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

К сожалению, глядя на исходный код компонента в репозитории react-datepicker, может показаться, что он всегда будет показывать текущий месяц и некоторое количество месяцев после него, контролируемое свойствомmonthsShown. Не думайте, что есть способ заставить его делать то, что вы хотите, кроме как разветвить репозиторий github и добавить функциональность самостоятельно (или отправить запрос на функцию). Рассматриваемый проблемный фрагмент:

календарь.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}`;

Свойство monthsShown контролирует, какие месяцы отображаются, и по умолчанию оно равно 1. Чтобы заставить его делать то, что вы хотите, можно добавить флаг, чтобы отменить добавление месяцев и вместо этого вычесть их.

Да, можно отображать комбинацию текущего месяца и предыдущего месяца.

попробуйте указать эти два значения:

showPreviousMonths = true и monthShown = 2

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

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

Другие вопросы по теме