How to show calendar only click on icon using JavaScript ?

Last Updated : 26 Sep, 2024

The Bootstrap Date Picker is a feature that provides a user-friendly interface for selecting dates via a drop-down calendar. It streamlines form inputs, allowing users to pick dates effortlessly and eliminating manual entry. Customizable and powered by jQuery, it enhances the overall user experience.

Here we have some common approaches:

Table of Content

Flatpickr Date Picker by using JavaScript
Flatpickr Date Picker with Custom Icon

Approach 1: Flatpickr Date Picker by using JavaScript

Flatpickr Initialization: Flatpickr is initialized for the input field, enabling date selection through a clean, simple interface.
Calendar Icon Click Event: The calendar icon has an event listener attached, allowing the date picker to open when the icon is clicked.
Date Format Customization: The date format is set to "d/m/Y" to display the date in day/month/year format per the requirement.
Positioning and Behavior: The date picker is set to position automatically at the bottom, with options for closing when clicked outside.
Manual Date Entry: The allowInput option allows users to manually type a date if preferred instead of using the picker.

html

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

<head>
    <!-- Importing Flatpickr CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <!-- Importing Bootstrap CSS for styling -->
    <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">

    <!-- Importing Font Awesome for icons -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</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 -->
            <div class="input-group">
                <!-- Calendar icon -->
                <span class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-calendar" 
                           id="calendar-icon"></i>
                    </span>
                </span>

                <!-- Input field for the date -->
                <input class="form-control" 
                       type="text" id="dob" 
                       placeholder="Select date">
            </div>
        </div>
    </div>

    <!-- Importing Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <!-- JavaScript to control the date picker functionality -->
    <script type="text/javascript">
        // Initialize Flatpickr for the input field
        document.addEventListener('DOMContentLoaded', function () {
            const dobField = document.getElementById('dob');
            const calendarIcon = document.getElementById('calendar-icon');

            // Initialize Flatpickr with options
            const datepicker = flatpickr(dobField, {
                dateFormat: "d/m/Y",  // Date format
                position: "auto bottom",  // Calendar position
                allowInput: true,  // Allow manual input
                onClose: function () {
                    // Calendar closes when clicked outside
                }
            });

            // Open the date picker when the calendar icon is clicked
            calendarIcon.addEventListener('click', function () {
                datepicker.open();
            });
        });
    </script>

</body>

</html>

Output:

Date-picker4 — Flatpickr Date Picker by using JavaScript Example Output

Approach 2: Flatpickr Date Picker with Custom Icon

Flatpickr Integration: Flatpickr is initialized on the input field with customizable date format and input options.
Custom Icon: A separate calendar icon is displayed next to the input field, using a locally stored image.
Icon Click Event: The date picker opens when the user clicks on the calendar icon, enhancing user experience.
Date Format: The date format is set to "d/m/Y," providing a user-friendly display for the selected date.
Closing Behavior: The date picker automatically closes when the user clicks outside the calendar interface, improving usability.

Example: In this example we are following above-explained approach.

html

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

<head>
    <!-- Importing Flatpickr CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <!-- Customizing the date picker button image -->
    <style type="text/css">
        .flatpickr-calendar {
            max-height: 28px;
        }

        .calendar-icon {
            width: 28px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <form class="form-group">
        Date:
        <input id="txtdate" 
               type="text" 
               class="form-control" 
               placeholder="Select date">
        <!-- Custom calendar icon -->
        <img id="calendar-icon" 
             class="calendar-icon" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231215151044/datePicker.png" 
             alt="Calendar Icon">
    </form>

    <!-- Importing Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <!-- JavaScript to control the date picker -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const dateInput = document.getElementById('txtdate');
            const calendarIcon = document.getElementById('calendar-icon');

            // Initialize Flatpickr with the input field
            const datepicker = flatpickr(dateInput, {
                dateFormat: "d/m/Y", // Set date format
                allowInput: true, // Allow manual date input
                onClose: function () {
                    // Calendar closes automatically when clicked outside
                }
            });

            // Open date picker when clicking on the calendar icon
            calendarIcon.addEventListener('click', function () {
                datepicker.open();
            });
        });
    </script>
</body>

</html>

Output:

Date-picker3 — Flatpickr Date Picker with Custom Icon example Output

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

How to hide/show an image on button click using jQuery ?

Shreyasi_Chakraborty

Improve

Article Tags :

How to show calendar only click on icon using JavaScript ?

Approach 1: Flatpickr Date Picker by using JavaScript

Approach 2: Flatpickr Date Picker with Custom Icon

Similar Reads

Thank You!

What kind of Experience do you want to share?