Daterangepicker

Bootstrap Daterangepicker

Daterangepicker allows users to select a date range using a flexible popup calendar with RTL/LTR support.

Step 1: Install Daterangepicker

You can install Daterangepicker via yarn or include the JS/CSS files directly.

yarn add daterangepicker

Step 2: Include CSS & script

Include the Daterangepicker CSS and JS files along with Moment.js.

<!-- Daterangepicker CSS -->
<link href="../assets/libs/daterangepicker/daterangepicker.css" rel="stylesheet">

<!-- Moment.js -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<!-- Daterangepicker JS -->
<script src="../assets/libs/daterangepicker/daterangepicker.js"></script>

Step 3: Add Input Field

Add a text input for the date range picker with a descriptive ID.

<!-- Date range -->
<input class="form-control" type="text" id="date-range" value="02/06/2020 - 02/20/2020">

Step 4: Initialize Daterangepicker

Use JavaScript to initialize the daterangepicker, supporting RTL/LTR layout and custom button classes.

"use strict";

$(function () {
    var position = $("html").attr("dir") === "rtl" ? "left" : "right";

    $("#date-range").daterangepicker({
        opens: position,
        cancelButtonClasses: "btn-label-danger"
    });
});

For more options, events, and styling, visit the Daterangepicker documentation.