How to add a select for a year in react-dates?

605 views javascript

It's a pain to swipe months right until I get to the right year with react-dates, is it possible to add some select for the year/month?

answered question

1 Answer


Yes, it is possible since version react-dates@17.0.0! (relevant pull request).

  1. npm install react-dates@latest
  2. You will likely need to update a few things as per the docs, because of the breaking changes (for me it was css mostly).
  3. Then utilize the newly introduced renderMonthElement prop to write your custom month&year selectors, for example:

    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' }}>
              onChange={(e) => onMonthSelect(month,}
              {moment.months().map((label, value) => (
                <option value={value}>{label}</option>
            <select value={month.year()} onChange={(e) => onYearSelect(month,}>
              <option value={moment().year() - 1}>Last year</option>
              <option value={moment().year()}>{moment().year()}</option>
              <option value={moment().year() + 1}>Next year</option>
      render = () =>
          onDateChange={(date) => this.setState({ date })}
          onFocusChange={({ focused }) => this.setState({ focused })}

posted this

Have an answer?


Please login first before posting an answer.