Datepicker

Bootstrap Datepicker

Bootstrap Datepicker allows users to select dates with a customizable calendar popup, supporting LTR/RTL layouts and auto-closing.

Step 1: Install Bootstrap Datepicker

You can install Bootstrap Datepicker via yarn.

yarn add bootstrap-datepicker

Step 2: Include Datepicker CSS & Script

Include the Bootstrap Datepicker CSS and JS files from your local libs folder.

<!-- Bootstrap Datepicker CSS -->
<link href="../assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">

<!-- Bootstrap Datepicker JS -->
<script src="../assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

Step 3: Add Datepicker Input

Create an input element that will display the datepicker popup when clicked.

<input type="text" class="form-control" placeholder="Select date" id="datepicker-1">

Step 4: Initialize Datepicker

Use the following JavaScript code to initialize the datepicker, supporting RTL/LTR layout and auto-close functionality.

"use strict";

$(function () {
    var orientation = $("html").attr("dir") === "rtl" ? "right" : "left";
    $("#datepicker-1").datepicker({
        orientation: orientation,
        autoclose: true
    });
});

For more configuration options, events, and styling, visit the Bootstrap Datepicker documentation.