Как добавить выбор на год в датах реагирования?

Question

Мучать месяцами тяжело, пока я не доберусь до нужного года с react-dates, возможно ли добавить несколько выбранных для года / месяца ?

Answer 1

Да, это возможно начиная с версии react-dates@17.0.0! ( соответствующий запрос на извлечение ).

1. npm install react-dates@latest
2. Вероятно, вам потребуется обновить некоторые вещи в соответствии с документами из-за серьезных изменений (для меня это был в основном css).

3. Тогда используйте недавно введенный renderMonthElement опора для написания пользовательских селекторов месяца и года, например:

   import React from 'react';
   import moment from 'moment';
   import { SingleDatePicker } from 'react-dates';
   
   class Main extends React.Component {
     state = {
       date: moment(),
       focused: true
     }
   
     renderMonthElement = ({ month, onMonthSelect, onYearSelect }) =>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <div>
           <select
             value={month.month()}
             onChange={(e) => onMonthSelect(month, e.target.value)}
           >
             {moment.months().map((label, value) => (
               <option value={value}>{label}</option>
             ))}
           </select>
         </div>
         <div>
           <select value={month.year()} onChange={(e) => onYearSelect(month, e.target.value)}>
             <option value={moment().year() - 1}>Last year</option>
             <option value={moment().year()}>{moment().year()}</option>
             <option value={moment().year() + 1}>Next year</option>
           </select>
         </div>
       </div>
   
     render = () =>
       <SingleDatePicker
         date={this.state.date}
         onDateChange={(date) => this.setState({ date })}
   
         focused={this.state.focused}
         onFocusChange={({ focused }) => this.setState({ focused })}
   
         renderMonthElement={this.renderMonthElement}
       />
   }