README.md

Simple React Month Picker

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

Installation

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

Snapshots

Customisable preset options list:

Custom range selection:

Configuration

The most basic use:

<MonthPicker onChange={handleChange} />

Props

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

https://codesandbox.io/s/simple-react-month-picker-p9uhe

Code sample

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

import moment from "moment";

function App() {
  return (
    <div>
      <MonthPicker
        style={{ width: 300, margin: "50px auto" }}
        presets={[
          {
            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)}
        closeDelay={500}
      />
    </div>
  );
}

export default App;