@technikhil/react-daterangepicker NPM

About this package

Announcements

Getting Started

Install

$ npm install @technikhil/react-daterangepicker

$ 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

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

 {
    "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"
}