react-daterangepicker

The motive of this project is to create a pure react daterangepicker component that will get rid of all unnecessary dependancies like jquery, bootstrap, popperjs etc. which hampers the bundle size and page load performance in turn.

About this package

Date/time rangepicker for React16 and above

It is a fully responsive daterangepicker with or without bootstrap.css. See responsive section below for more details.

This is a work in progress and you are always welcome to help me going forward with this project.

The motive of this project is to create a pure react daterangepicker component that will get rid of all unnecessary dependancies like jquery, bootstrap, popperjs etc. which hampers the bundle size and page load performance in turn.

Announcements

• Date: 13 Oct 2018
  First working draft of the component is in action.
• Date: 21 Oct 2018
  Added two more options alwaysOpen and autoApply

Getting Started

Install

$ npm install @technikhil/react-daterangepicker

or

$ yarn add @technikhil/react-daterangepicker

Demo

see Demo to how to consume this module or You can play around with the code on stackblitz here

Usage

How to make it work for you

Import DaterangepickerModule into your module as following

import React, { Component, Fragment } from "react";
import ReactDateRangePicker from "@technikhil/react-daterangepicker";
export default class DemoApp extends Component {
  render() {
    return (
      <Fragment>
        <HeaderComponent />
        <div className="container-fluid h-100 row">
          <div className="col-md-6 border-right">
            <h3>Configuration options tester</h3>
          </div>
          <div className="col-md-6 h-100">
            <div className="offset-md-3 col-md-6 row">
              <ReactDateRangePicker
                open="left"
                theme="dark"
                startDate="07.12.2018"
                endDate="07.12.2018"
                format="DD.MM.YYYY"
                onRangeSelected={range => {
                  console.log(range);
                }}
              />
            </div>
          </div>
        </div>
      </Fragment>
    );
  }
}

Options

Currently, very minimum number of options are available but I will keep on developing and adding more and more options

Prop Name	Type	Purpose	Default Value	Possible Values
format	string	format that this daterangepicker will use to communicate with your code	"DD.MM.YYYY"	As per momentjs standard formats
startDate	string	Default start date when this components is rendered for first time. Format of this date should be in line with format option's value above	""(Empty String)	date string in line with "format" prop's value above
endDate	string	Default end date when this components is rendered for first time. Format of this date should be in line with "format" prop's value above	Current Systetm Date	date string in line with format option's value above
open	string	position of the flyout which will open. By default it opens on left edge of input box	'left'	'left','right'
theme	string	The theme i.e background/font color of the input box and flyout	'light'	'light','dark' See theme section below for more/custom theming
alwaysOpen	boolean	Will keep the calendars always open. And will hide the main input box showing range. Will hide the cancel button from the popup	false	true, false
autoApply	boolean	Will automatically apply range as soon as user selects date from right calendar. Will hide apply button from the bottom of popup	false	true, false

Callback

Pass in onRangeSelected callback as

<ReactDateRangePicker
    open="left"
    theme="dark"
    startDate="07.12.2018"
    endDate="07.12.2018"
    format="DD.MM.YYYY"
    onRangeSelected={(range) => {
        console.log(range)
    }}
/>

the callback will receive a javascript object containing

{
  fromDate: "moment object representing start date selected by user",
  toDate: "moment object representing end date selected by user";
}

Theming

If you want to have your own theme defined for the component. You can

1. Override the css of the component
or
2. You can pass your theming colors to the component via theme prop as follows. It override all the colors of theme used.

 {
    "daterangepicker-flyout-background": "#FFF",
    "daterangepicker-flyout-foreground": "#000",
    "daterangepicker-flyout-box-shadow-color": "#777",
    "daterangepicker-flyout-border-color": "#777",
    "daterangepicker-date-hover": "#444",
    "daterangepicker-date-selected": "#777",
    "daterangepicker-date-inSelectedRange": "#777",
    "daterangepicker-input-background": "#FFF",
    "daterangepicker-input-foreground": "#000",
    "daterangepicker-input-box-shadow-color": "rgba(0,0,0,.075)",
    "daterangepicker-input-border-color": "#777",
    "daterangepicker-icon-color": "#000",
    "daterangepicker-font-size": "14px",
    "daterangepicker-clear-button-foreground": "#000",
    "daterangepicker-apply-button-background": "green",
    "daterangepicker-apply-button-foreground": "#FFF",
    "daterangepicker-cancel-button-background": "#DEDEDE",
    "daterangepicker-cancel-button-foreground": "#000"
}

Dependencies

moment.js version greater than 2.17.1
moment-range.js version 2.2.0
css-vars-ponyfill

Issues/Problems

Please let me know if you are facing any issues here

Want to contribute. You are welcome!!! :)

1. Fork this repo
2. "npm install" or "yarn install"
3. run "npm run serve" or "yarn serve"
4. open browser at http://localhost:8080/
5. You are all set.
6. Add features. Fix issues. Open Pull requests.