Skip to content
This repository has been archived by the owner on Oct 3, 2020. It is now read-only.

Daterangepicker where end user can select start and end date/time in one shot. No need of multiple input boxes and multiple datepickers

License

Notifications You must be signed in to change notification settings

technikhil314/react-datetimerangepicker-old

Repository files navigation

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
  2. or
  3. 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.