0.2.9 • Published 1 year ago
simple-react-month-range-picker v0.2.9
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;