Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 3 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></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 3 Datepicker</h1> <label for="datepicker" class="control-label">Select a Date</label> <div class="input-group"> <input type="text" id="datepicker" class="form-control" placeholder="Select a date"> <span class="input-group-addon" id="calendar-icon"> <i class="bi bi-calendar"></i> <!-- Calendar icon --> </span> </div> </div> <!-- Flatpickr JS --> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script> $(document).ready(function () { // Initialize Flatpickr on the input field const datepicker = flatpickr("#datepicker", { dateFormat: "Y-m-d", // Customize the date format allowInput: true, // Allows users to manually type dates }); // Open Flatpickr on calendar icon click $("#calendar-icon").on("click", function () { datepicker.open(); // Open Flatpickr programmatically }); }); </script> </body> </html>
Go to
Tutorialdeep Homepage