simple-react-month-range-picker
v0.2.9
Published
Simple React Month Range Picker
Downloads
4
Maintainers
Readme
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;