Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.
https://github.com/skratchdot/react-bootstrap-daterangepicker

Last synced: about 17 hours ago
JSON representation

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

Host: GitHub
URL: https://github.com/skratchdot/react-bootstrap-daterangepicker
Owner: skratchdot
License: other
Created: 2014-07-22T20:52:43.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2023-10-11T08:28:22.000Z (about 1 year ago)
Last Synced: 2024-12-06T07:04:15.387Z (8 days ago)
Language: JavaScript
Homepage: http://projects.skratchdot.com/react-bootstrap-daterangepicker/
Size: 13.1 MB
Stars: 474
Watchers: 9
Forks: 203
Open Issues: 26
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-react-components-all - react-bootstrap-daterangepicker - A date/time picker for react (using bootstrap). This is a react port of bootstrap-daterangepicker. (Uncategorized / Uncategorized)
awesome-list - react-bootstrap-daterangepicker - A date/time picker for react (using bootstrap). This is a react port of bootstrap-daterangepicker. (Demos / Form Components)

README

        # react-bootstrap-daterangepicker

[![NPM version](https://badge.fury.io/js/react-bootstrap-daterangepicker.svg)](http://badge.fury.io/js/react-bootstrap-daterangepicker)

[![Build Status](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker.svg?branch=master)](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker)

[![Code Climate](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker.png)](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker)

[![Coverage Status](https://coveralls.io/repos/skratchdot/react-bootstrap-daterangepicker/badge.svg?branch=master&service=github)](https://coveralls.io/github/skratchdot/react-bootstrap-daterangepicker?branch=master)

[![NPM](https://nodei.co/npm/react-bootstrap-daterangepicker.png)](https://npmjs.org/package/react-bootstrap-daterangepicker)

# 🚨 Deprecation Notice 🚨

> I put this project on github because I used it briefly for a project back in 2014. I haven't used it for years, and have recommended

> looking for a "pure react" date picker library. I might continue to merge small PRs, but will not be giving this library much/any

> support. I recommend using one of the [other react date picker](#other-react-date-pickers) libraries listed below.

## 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](https://github.com/dangrossman/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.

```javascript

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 (

      

        Click Me To Open Picker!

      

    );

  }

}

```

## Documentation

For in depth documentation, see the original

[bootstrap-daterangepicker](https://github.com/dangrossman/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](https://reactjs.org/docs/uncontrolled-components.html). If you try

to control the value of your child ``, then 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

```javascript

  

    click to open

  

```

#### Simple input example

```javascript

  

```

#### Initialize with a startDate and endDate

```javascript

  

```

#### Example event handler:

```javascript

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](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md).

## Links

- [Source Code](https://github.com/skratchdot/react-bootstrap-daterangepicker)

- [Changelog](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md)

- [Live Demo](http://projects.skratchdot.com/react-bootstrap-daterangepicker/)

- [Original Plugin](https://github.com/dangrossman/bootstrap-daterangepicker)

## Other React Date Pickers

- [react-date-range](https://github.com/Adphorus/react-date-range)

- [react-dates](https://github.com/airbnb/react-dates)

- [react-datepicker](https://github.com/Hacker0x01/react-datepicker)

- [react-datetimerange-picker](https://github.com/wojtekmaj/react-datetimerange-picker)

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

## License

Copyright (c) 2014 skratchdot  

Uses the original [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) license.