Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
React Bootstrap Daterangepicker screenshot

React Bootstrap Daterangepicker

Author Avatar Theme by Skratchdot
Updated: 24 Aug 2022
474 Stars

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

Github Live Preview

Categories

React

Overview:

The React-Bootstrap-Daterangepicker is a date/time picker for React that wraps around an existing jQuery/bootstrap library. It provides a convenient way to integrate a date picker functionality into React projects while utilizing Bootstrap styles.

Features:

  • Bootstrap Integration: Utilizes Bootstrap styles for a cohesive design.
  • Support for Settings: Allows passing various settings from the original plugin to customize the date picker.
  • Event Handling: Provides callbacks for various events such as show, hide, apply, cancel, etc.
  • Uncontrolled Component: Designed to be used as an Uncontrolled Component to prevent issues with controlling input values.

Installation:

  1. Install the peer dependencies:
npm install --save bootstrap-daterangepicker react jquery moment
  1. Install the module:
npm install --save react-bootstrap-daterangepicker
  1. Include Bootstrap CSS and fonts in the project:
import 'bootstrap/dist/css/bootstrap.css';
  1. Include the Bootstrap-daterangepicker CSS:
import 'bootstrap-daterangepicker/daterangepicker.css';
  1. Use a tool like Browserify/webpack to build the code effectively.

Summary:

The React-Bootstrap-Daterangepicker is a convenient tool for adding date/time picker functionality to React projects. Despite being a wrapper around a jQuery/bootstrap library, it provides seamless integration with React components. The library offers several customization options, event handling capabilities, and emphasizes the use of Uncontrolled Components for a smoother user experience. However, it is recommended to explore newer libraries that offer a “pure react” date picker solution for modern projects.