2.0.3 • Published 3 years ago

react-horizontal-datepicker-localize v2.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

npm.io

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

PropTypeDefaultDescription
getSelectedDayFunctionFunction to get the selected Day
endDateNumber90Number of days to render from current date
selectDateDateprop to send selected date manually or from another calendar component
colorString'rgb(54, 105, 238)'Set the primary color can be any color format in string
labelFormatString'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