Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Datepicker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <!-- Flatpickr CSS --> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet"> <!-- Bootstrap Icons (Optional) --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <style> body{ padding:15px; } </style> </head> <body> <div class="container"> <h1>Bootstrap 4 Datepicker</h1> <label for="datepicker" class="form-label">Select a Date</label> <div class="input-group"> <input type="text" id="datepicker" class="form-control" placeholder="Select a date"> <div class="input-group-append"> <span class="input-group-text" id="calendar-icon"> <i class="bi bi-calendar"></i> <!-- Calendar icon --> </span> </div> </div> </div> <!-- Flatpickr JS --> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script> document.addEventListener('DOMContentLoaded', function () { flatpickr("#datepicker", { dateFormat: "Y-m-d", allowInput: true }); // Open datepicker on icon click document.querySelector("#calendar-icon").addEventListener("click", function () { datepicker.open(); }); }); </script> </body> </html>
Go to
Tutorialdeep Homepage