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

Last Updated : 29 Jul, 2024

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:

How to Change Date Format in jQuery UI DatePicker ?

debadebaduttapanda7

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?