portpro-date-range-picker

Description

A date/time picker for react (using bootstrap). This is a react wrapper around an existing jQuery/bootstrap library (it is not a pure react port):

bootstrap-daterangepicker

Getting Started

1. Install the needed peer dependencies: npm install --save portpro-date-range-picker

import React, { Component } from 'react';
import DateTimeRangePicker from 'portpro-date-range-picker';
// you will need the css that comes with bootstrap@3. if you are using
// a tool like webpack, you can do the following:
import 'bootstrap/dist/css/bootstrap.css';
// you will also need the css that comes with bootstrap-daterangepicker
import 'bootstrap-daterangepicker/daterangepicker.css';

class MyComponent {
  render() {
    return (
      <DateTimeRangePicker
      fromDate={'1/1/2014'}
      toDate={'3/1/2014'}
      >
        <button>Click Me To Open Picker!</button>
      </DateTimeRangePicker>
    );
  }
}

Documentation

For in depth documentation, see the original bootstrap-daterangepicker project page.

You can pass all the settings from the original plugin to the initialSettings prop:

• <input>, alwaysShowCalendars, applyButtonClasses, applyClass, autoApply, autoUpdateInput, buttonClasses, cancelButtonClasses, cancelClass, dateLimit, drops, endDate, isCustomDate, isInvalidDate, linkedCalendars, locale, maxDate, maxSpan, maxYear, minDate, minYear, moment, opens, parentEl, ranges, showCustomRangeLabel, showDropdowns, showISOWeekNumbers, showWeekNumbers, singleDatePicker, startDate, template, timePicker, timePicker24Hour, timePickerIncrement, timePickerSeconds

You can listen to the following 8 events:

• onShow: callback(event, picker) thrown when the widget is shown
• onHide: callback(event, picker) thrown when the widget is hidden
• onShowCalendar: callback(event, picker) thrown when the calendar is shown
• onHideCalendar: callback(event, picker) thrown when the calendar is hidden
• onApply: callback(event, picker) thrown when the apply button is clicked
• onCancel: callback(event, picker) thrown when the cancel button is clicked
• onEvent: callback(event, picker) thrown when any of the 6 events above are triggered
• onCallback: callback(start, end, label) thrown when the start/end dates change

You MUST pass a single child element to the <DateTimeRangePicker /> component- and it MUST be a DOM element. Passing custom react components is not currently supported b/c this lib needs a single dom node to initialize.

There are 2 methods from the upstream lib that can be called: setStartDate and setEndDate, but you need to use refs when doing so.

Simple button example

<DateTimeRangePicker>
  <button type="button" className="btn btn-primary">
    click to open
  </button>
</DateTimeRangePicker>

Simple input example

<DateTimeRangePicker>
  <input type="text" className="form-control" />
</DateTimeRangePicker>

Initialize with a startDate and endDate

<DateTimeRangePicker
      fromDate={'01/01/2020'}
      toDate={'01/15/2020'}
>
  <input type="text" className="form-control" />
</DateTimeRangePicker>

Example event handler:

class SomeReactComponent extends React.Component {
  handleEvent(event, picker) {
    console.log(picker.startDate);
  }
  handleCallback(start, end, label) {
    console.log(start, end, label);
  }
  render() {
    return (
      <DateTimeRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}>
        <input />
      </DateTimeRangePicker>;
  }
}