react-bootstrap-daterangepicker

by skratchdot

A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-dateran...

436 Stars 200 Forks Last release: Not found Other 239 Commits 55 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-bootstrap-daterangepicker

NPM version Build Status Code Climate Coverage Status Dependency Status devDependency Status

NPM

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 bootstrap-daterangepicker react jquery moment
  2. Install the module with:

    npm install --save react-bootstrap-daterangepicker
  3. Include the [email protected] css and fonts in your project. (aka

    import 'bootstrap/dist/css/bootstrap.css';
    )
  4. Include the bootstrap-daterangepicker css in your project. (aka

    import 'bootstrap-daterangepicker/daterangepicker.css';
    )
  5. This is a commonjs library. You will need a tool like browserify/webpack/etc to build your code.

import React, { Component } from 'react';
import DateRangePicker from 'react-bootstrap-daterangepicker';
// you will need the css that comes with [email protected] 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 ( Click Me To Open Picker! ); } }

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

 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.

NOTE: This component should be used as an Uncontrolled Component. If you try to control the value of your child

, the you will probably encounter issues.

There are 2 methods from the upstream lib that can be called:

setStartDate
and
setEndDate
, but you need to use refs when doing so. Please view the storybook for an example of this.

Examples

For more usage examples, please view the storybook:
https://projects.skratchdot.com/react-bootstrap-daterangepicker/

Simple button example

  
    click to open
  

Simple input example

  

Initialize with a startDate and endDate

  

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 (
      
        
      ;
  }
}

Release Notes

Release notes can be found in the Changelog.

Links

Other React Date Pickers

NOTE: Please submit a PR if there are other date pickers you can recommend

License

Copyright (c) 2014 skratchdot
Uses the original bootstrap-daterangepicker license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.