Datetimepicker

Bootstrap DateTime Picker

Bootstrap DateTime Picker allows users to select both date and time with a flexible popup interface, supporting RTL/LTR layouts.

Step 1: Install Bootstrap DateTime Picker

You can install Bootstrap DateTime Picker via yarn.

yarn add bootstrap-datetime-picker

Step 2: Include DateTime Picker CSS & Script

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

<!-- Bootstrap DateTime Picker CSS -->
<link href="../assets/libs/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<!-- Bootstrap DateTime Picker JS -->
<script src="../assets/libs/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"></script>

Step 3: Add DateTime Picker Input

Create an input element that will display the date and time picker popup when clicked.

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

Step 4: Initialize DateTime Picker

Use the following JavaScript code to initialize the DateTime Picker, supporting RTL/LTR layout and highlighting today’s date.

"use strict";

$(function () {
    var position = $("html").attr("dir") === "rtl" ? "left" : "right";
    $("#datetimepicker-1").datetimepicker({
        pickerPosition: position,
        todayHighlight: true
    });
});

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