bootstrap-daterangepicker

What is bootstrap-daterangepicker?

The bootstrap-daterangepicker npm package is a date range picker component for Bootstrap. It allows users to select a date range from a calendar view, which can be used in forms, reports, and other applications where date range selection is required.

What are bootstrap-daterangepicker's main functionalities?

Basic Date Range Picker

This feature allows you to add a basic date range picker to an input field. When the input field is clicked, a calendar view appears, allowing the user to select a start and end date.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-daterangepicker/daterangepicker.css';
import $ from 'jquery';
import 'bootstrap-daterangepicker';

$(function() {
  $('input[name="daterange"]').daterangepicker();
});

Predefined Date Ranges

This feature allows you to define predefined date ranges that users can quickly select. This is useful for common date ranges like 'Last 7 Days' or 'This Month'.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-daterangepicker/daterangepicker.css';
import $ from 'jquery';
import 'bootstrap-daterangepicker';

$(function() {
  $('input[name="daterange"]').daterangepicker({
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  });
});

Single Date Picker

This feature allows you to configure the date range picker to select a single date instead of a range. This is useful for forms where only a single date is needed.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-daterangepicker/daterangepicker.css';
import $ from 'jquery';
import 'bootstrap-daterangepicker';

$(function() {
  $('input[name="singleDate"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true
  });
});

Other packages similar to bootstrap-daterangepicker

react-dates

react-dates is a date picker component for React. It offers a highly customizable and accessible date range picker and single date picker. Compared to bootstrap-daterangepicker, react-dates is specifically designed for React applications and offers more flexibility in terms of customization and theming.

flatpickr

flatpickr is a lightweight and powerful datetime picker. It supports date range selection, single date selection, and time selection. Compared to bootstrap-daterangepicker, flatpickr is more lightweight and has no dependencies on jQuery or Bootstrap, making it a good choice for projects that do not use these libraries.

air-datepicker

air-datepicker is a lightweight, customizable datepicker with no dependencies. It supports date range selection and single date selection. Compared to bootstrap-daterangepicker, air-datepicker is more lightweight and does not require jQuery or Bootstrap, making it suitable for projects that aim to minimize dependencies.

README

Date Range Picker for Bootstrap

This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates. I created it while building the UI for Improvely, which needed a way to select date ranges for reports.

Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, optional time picker (for e.g. making appointments or reservations), and styles that match the default Bootstrap 3 theme.

Documentation and Live Usage Examples

See It In a Live Application

License

This code is made available under the same license as Bootstrap. Moment.js is included in this repository for convenience. It is available under the MIT license.

--

The MIT License (MIT)

Copyright (c) 2012-2018 Dan Grossman

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.