react-horizontal-datepicker

2.0.3 • Public • Published

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

function App() {
 
    const selectedDay = (val) =>{
        console.log(val)
    };
 
  return (
      <DatePicker getSelectedDay={selectedDay}
                  endDate={100}
                  selectDate={new Date("2020-04-30")}
                  labelFormat={"MMMM"}
                  color={"#374e8c"}          
/>
  );
}

Todo

use react window for efficiency

Package Sidebar

Install

npm i react-horizontal-datepicker

Weekly Downloads

415

Version

2.0.3

License

MIT

Unpacked Size

18.3 kB

Total Files

13

Last publish

Collaborators

  • _kushagra