Simple React month picker

Usage no npm install needed!

<script type="module">
  import simpleReactMonthPicker from '';


Simple React Month Picker

Simple-React-Month-Picker Component offers a popup month selection panel with the option of presets or custom month ranges.


npm install simple-react-month-picker --save


Customisable preset options list:

Preset options

Custom range selection:

Custom months


The most basic use:

<MonthPicker onChange={handleChange} />


prop type description
onChange func Function invoked when start and end dates have been selected, it will be passed an array with the start and end dates: [startDate, endDate]
presets array Array of objects to use as presets: [{title: "preset title", start: startDate, end: endDate}]
closeDelay int Delay in ms before pop-up window closes
value array Starting dates: [startDate, endDate]
highlightCol string Colour of selected months

Usage Example

Online demo

Code sample

import MonthPicker from "simple-react-month-picker";
import moment from "moment";

function App() {
  return (
        style={{ width: 300, margin: "50px auto" }}
            title: "This month",
            start: moment().startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
            title: "Past 3 months",
            start: moment().subtract(2, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
            title: "Past 6 months",
            start: moment().subtract(5, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
            title: "Past Year",
            start: moment().subtract(12, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
            title: "All time",
            start: null,
            end: null,
        onChange={(range) => console.log(range)}

export default App;