How to use Bootstrap Datepicker to get date on change event ?

30 Nov, 2021
In this article, we will learn how to use Bootstrap Datepicker to get a date on changes of events. Bootstrap Datepicker is an open-source repository that provides an API to integrate date time picker into the frontend of the website. One should have a basic knowledge of HTML, CSS, jQuery, and Bootstrap.
Approach:
Create an HTML file.
Please follow the below code format to link some external CSS to your code inside the head tag by following this order.
Start by including the bootstrap CSS  in your file. Add the bootstrap datepicker CSS to your file. Finally, you need to add the font awesome CSS to your HTML file.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css” /><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css” /><link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” />   
Following the below code format, attach some external JavaScript files to your code inside the head tag by following this order.
Start by including the jquery JavaScript in your file. The second step is to add the bootstrap JavaScript to your file. Finally, you need to add the bootstrap datetimepicker JavaScript to your HTML file.
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”> </script><script src= “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js”></script>
Add a class name as “datepicker” and other bootstrap classes to an input field as required
You can use any icon from any resource like font awesome or any other platform to beautify your input field by aligning the icon in line with the input field.
It is then necessary to initialize the date picker to the input field so that when the user clicks that input field, the pop-up calendar will appear and they can then pick the date from that prompt.
Example: In this example, we take an input field with class name as “datepicker”, and initialize the datepicker on this input using datepicker(). 
A calendar appears when the user clicks the input field, and a date can be selected from the calendar. As soon as the user selects a date from the calendar, it is automatically written into the input field. We add an event listener onchange for that input field. When a selection is made in that input field, the onchange() callback method is automatically called to get the value of the input field using the jQuery val() method.  
HTML
<!DOCTYPE html><html>  <head>    <link rel="stylesheet"          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />    <link rel="stylesheet"           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />    <link rel="stylesheet"           href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">    </script>      <style>        .container {            display: flex;            justify-content: center;            margin-top: 30px;        }              h1,        container {            color: green;        }    </style></head>  <body>    <h1 class="container">        GeeksforGeeks    </h1>    <div class="container">        <div class="datepicker date                     input-group p-0 shadow-sm">            <input id="reservationDate"                    type="text"                   placeholder="Choose a date"                    class="form-control py-4 px-4" />            <div class="input-group-append">               <span class="input-group-text px-4">                  <i class="fa fa-clock-o"></i>                </span>             </div>        </div>    </div>    <div class="container">        <p id="showdate"> No Date is Picked </p>    </div>      <script>        $(".datepicker").datepicker({            clearBtn: true,            format: "dd/mm/yyyy",        });        $(".datepicker").on("change", function() {            let pickedDate = $("input").val();            $("#showdate").text(            `You picked this ${pickedDate} Date`);        });    </script></body>  </html>
Output:
Bootstrap-Questions
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
Bootstrap
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property