How to setting up Datepicker in Bootstrap ?

Last Updated : 19 Sep, 2024

A Datepicker is an input tool that allows users to select dates from a calendar view rather than typing manually. To set it up in Bootstrap, integrate the Bootstrap Datepicker library using HTML, CSS, jQuery, and Bootstrap, customizing it with various options for functionality.

Syntax

$("#datepickerID").datepicker({ 
          OPTIONS
    }).datepicker('update', new Date());

Approach:

First, create an HTML file with a page body, input field, and other elements. Create separate javascript and CSS files, if required, and include them in the HTML file.
Add JAVASCRIPT for instantiating a datepicker. Add different options for getting different functions in datepicker.
Follow the below code format to link some external CSS to your code inside the <head> tag by following this order.
Add the following CDN links, in order to enable the use of the datepicker

Bootstrap 3.0+ (Link CSS And JS):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

UX Solutions Datepicker 1.2+

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Add the various available classes in Bootstrap Datepicker, to an input field as required.
We can add datepicker options at the time when datepicker instance is created.
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 1: In this example, we have set up bootstrap datepicker with autoclose and todayhighlight option. An autoclose option automatically closes the datepicker after the selection of the date. The todayhighlight option highlights today's date.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
          rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <title>Bootstrap Datepicker</title>
    <style>
      label{margin-left: 20px;}
      #datepicker{width:180px;}
      #datepicker > span:hover{cursor: pointer;}
    </style>
 </head>

<body>
    <div class="container">
        <h1 class="text-success font-weight-bold">
            GeeksforGeeks
        </h1>
        <h3>
            setting up bootstrap datepicker
        </h3>
        <label>Select Date: </label>
        <div id="datepicker" 
             class="input-group date" 
             data-date-format="mm-dd-yyyy">
            <input class="form-control" 
                   type="text" readonly />
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js" 
        integrity=
    "sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
        crossorigin="anonymous">
    </script>
    <script>
        $(function () {
            $("#datepicker").datepicker({ 
                autoclose: true, 
                todayHighlight: true,
            }).datepicker('update', new Date());
        });
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" 
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
    </script>
</body>

</html>

Output: From the output, after running the project we can see the following output in the browser.

Example 2: In this example, we will add todayBtn option that will add the today button at bottom of datepicker which on click selects today's date. Also, we will add a title option that shows the datepicker title. We will use the above example by updating the code, where the script has both options added to the function.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
          rel="stylesheet" 
          type="text/css" />
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <title>Bootstrap Datepicker</title>

    <style>
        label{margin-left: 20px;}
        #datepicker{width:180px;}
        #datepicker > span:hover{cursor: pointer;}
    </style>
</head>

<body>
    <div class="container">
        <h1 class="text-success font-weight-bold">
            GeeksforGeeks
        </h1>
        <h3>
            setting up bootstrap datepicker
        </h3>
        <label>Select Date: </label>
        <div id="datepicker" 
             class="input-group date" 
             data-date-format="mm-dd-yyyy">
            <input class="form-control" 
                   type="text" readonly />
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
        </div>
    </div>

    <script src=
"https://code.jquery.com/jquery-3.6.1.min.js" 
        integrity=
"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
        crossorigin="anonymous">
    </script>
    
    <script>
        $(function () {
            $("#datepicker").datepicker({ 
                autoclose: true, 
                todayHighlight: true,
                todayBtn : "linked",
                title : "Geeksforgeeks datepicker"
            }).datepicker('update', new Date());
        });
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" 
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
    </script>
</body>
  
</html>

Output:

How to Add Simple DatePicker in Next.js ?

deepcodr

Improve

Article Tags :

How to setting up Datepicker in Bootstrap ?

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?