react-horizontal-datepicker
V2 with new logic and completely removing dependency on react-waypoint as well as leaner code which now uses css-modules
A simple and lightweight easily style-able Side scrolling datepicker, built with ❤️
Bundle size of 469 Bytes Minified + Gzipped
Installation
Run yarn add react-horizontal-datepicker
or
Run npm i react-horizontal-datepicker
Usage
Import:
import DatePicker from "react-horizontal-datepicker";
and simply use the component as:
<DatePicker />
example at the end
Available Props are
Prop | Type | Default | Description |
---|---|---|---|
getSelectedDay | Function | Function to get the selected Day | |
endDate | Number | 90 | Number of days to render from current date |
selectDate | Date | prop to send selected date manually or from another calendar component | |
color | String | 'rgb(54, 105, 238)' | Set the primary color can be any color format in string |
labelFormat | String | 'MMMM yyyy' | Month label format - uses date-fns format types |
Example:
https://codesandbox.io/s/vigilant-newton-gn0g7
{ const selectedDay = { console }; return <DatePicker getSelectedDay=selectedDay endDate=100 selectDate="2020-04-30" labelFormat="MMMM" color="#374e8c" /> ;}
Todo
use react window for efficiency