Simple React Month Range Picker
Simple-React-Month-Range-Picker Component offers a popup month selection panel with the option of presets or custom month ranges.
Installation
npm install simple-react-month-range-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 |
locale |
string |
Date locale |
description |
string |
Description inside the card |
emptyDescription |
string |
Placeholder when range is not selected |
startDate |
date |
Used to define the start date of the selector |
endDate |
date |
Used to define the end date of the selector |
Usage Example
Online demo
https://codesandbox.io/s/simple-react-month-picker-p9uhe
Code sample
import MonthPicker from "simple-react-month-range-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,
},
]}
locale='pt-BR'
description='Test'
emptyDescription='No range selected'
startDate={new Date('2010-02')}
endDate={new Date('2020-10')}
onChange={(range) => console.log(range)}
closeDelay={500}
/>
</div>
);
}
export default App;