react-bootstrap-daterangepicker

WebJar for react-bootstrap-daterangepicker

License

License

Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-bootstrap-daterangepicker
Last Version

Last Version

1.0.4
Release Date

Release Date

Type

Type

jar
Description

Description

react-bootstrap-daterangepicker
WebJar for react-bootstrap-daterangepicker
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/skratchdot/react-bootstrap-daterangepicker

Download react-bootstrap-daterangepicker

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-daterangepicker/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-bootstrap-daterangepicker</artifactId>
    <version>1.0.4</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-daterangepicker/
implementation 'org.webjars.npm:react-bootstrap-daterangepicker:1.0.4'
// https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-daterangepicker/
implementation ("org.webjars.npm:react-bootstrap-daterangepicker:1.0.4")
'org.webjars.npm:react-bootstrap-daterangepicker:jar:1.0.4'
<dependency org="org.webjars.npm" name="react-bootstrap-daterangepicker" rev="1.0.4">
  <artifact name="react-bootstrap-daterangepicker" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-bootstrap-daterangepicker', version='1.0.4')
)
libraryDependencies += "org.webjars.npm" % "react-bootstrap-daterangepicker" % "1.0.4"
[org.webjars.npm/react-bootstrap-daterangepicker "1.0.4"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : bootstrap-daterangepicker jar [2.1.13,3)
org.webjars.npm : jquery jar [1.11.3,2)

Project Modules

There are no modules declared in this project.

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 bootstrap@4 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 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 (
      <DateRangePicker
        initialSettings={{ startDate: '1/1/2014', endDate: '3/1/2014' }}
      >
        <button>Click Me To Open Picker!</button>
      </DateRangePicker>
    );
  }
}

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 <DateRangePicker /> 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 <input />, 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

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

Simple input example

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

Initialize with a startDate and endDate

<DateRangePicker
  initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
>
  <input type="text" className="form-control" />
</DateRangePicker>

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 (
      <DateRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}>
        <input />
      </DateRangePicker>;
  }
}

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.

Versions

Version
1.0.4
1.0.0-beta.1
0.4.0
0.2.4