How to show calendar only click on icon using JavaScript ?

Last Updated : 20 Dec, 2023

In this article, we will learn how we can show the date picker only on click to the icon using JavaScript. The date-picker is one such interactive feature provided by Bootstrap to select a date from a drop-down calendar which is directly reflected in the input field eliminating the hassle of entering the date manually.

Approach 1: This approach uses the font awesome icon as the date picker toggler.

The calendar icon is appended to the input field where the date is to be input using the input-group-prepend class.
The icon when clicked triggers the setDatepicker() function that accepts the current event as an argument.
Next, the class name of the parent of the icon is obtained using the parent() and attr() methods of jQuery. As soon as the class name is obtained replace the spaces by a dot(.).
This step is important as the class name is required in the class selector in the jQuery datepicker() function. The datepicker() function specifies the format of the date, the orientation of the calendar, closing, and autofocus behavior.

Example: The below example explains how to show the calendar only on click to an icon using jQuery.

html

<!DOCTYPE html>
<html>
 
<head>
    <!-- Importing jquery cdn -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
        </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous">
        </script>
 
    <!-- Importing icon cdn -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
    <!-- Importing core bootstrap cdn -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
 
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
        </script>
 
    <!-- Importing datepicker cdn -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
    </script>
</head>
 
<body>
    <!-- Container class contains the date field -->
    <div class="container"
         style="max-width: 250px;">
        <div class="form-group m-1">
            <label class="font-weight-bold"
                   for="dob">
                Date of Birth:
            </label>
 
            <!-- Input field along with 
                calendar icon and -->
            <div class="input-group date">
                <!-- Sets the calendar icon -->
                <span class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-calendar"
                           onclick="setDatepicker(this)">
                        </i>
                    </span>
                </span>
 
                <!-- Accepts the input from calendar -->
                <input class="form-control"
                       type="text" name="dob"
                       id="dob" value="">
            </div>
        </div>
    </div>
 
    <!-- JavaScript to control the actions
         of the date picker -->
    <script type="text/javascript">
        function setDatepicker(_this) {
 
            /* Get the parent class name so we 
                can show date picker */
            let className = $(_this).parent()
                .parent().parent().attr('class');
 
            // Remove space and add '.'
            let removeSpace = className.replace(' ', '.');
 
            // jQuery class selector
            $("." + removeSpace).datepicker({
                format: "dd/mm/yyyy",
 
                // Positioning where the calendar is placed
                orientation: "bottom auto",
                // Calendar closes when cursor is 
                // clicked outside the calendar
                autoclose: true,
                showOnFocus: "false"
            });
        }
    </script>
</body>
 
</html>

Output

Date-picker using Javascript

Approach 2: The second approach is comparatively easier. It accomplishes the target in fewer lines of code.

The date-picker button Image also serves the same purpose as the icon in the previous example. The buttonImageOnly does not only add an image to the button but it also adds an image to the document.
As we click on the image the calendar is displayed and the user can select the date which is immediately reflected in the input field.

Example: The below example explains how to show the calendar only on click to an icon using jQuery.

html

<html>
<head>
    <!-- Importing jquery cdn -->
    <link href=
"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
        rel="Stylesheet"
        type="text/css" />
 
    <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js">
    </script>
 
    <script type="text/javascript"
        src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
 
    <!-- JavaScript function to display the calendar -->
    <script language="javascript">
        $(document).ready(function () {
            $("#txtdate").datepicker({
                showOn: "button",
 
                // Button image stored on local device
                buttonImage: 
"https://media.geeksforgeeks.org/wp-content/uploads/20231215151044/datePicker.png",    
                buttonImageOnly: true
            });
        });
    </script>
 
    <!-- Customizing the datepicker button image -->
    <style type="text/css">
        .ui-datepicker-trigger { 
            max-height: 28px;
        }
    </style>
</head>
 
<body>
    <form class="form-group">
        Date :
        <input id="txtdate" type="text"
            class="form-control">
    </form>
</body>
</html>

Output:

datePickerGIF

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.