How to make the calendar popup on click of a calendar icon ?

Question

I am working on the website in which I want to popup the calendar on hitting calendar icon.

The HTML code which I have used in order to place Start Date

Answer 1

You can try Bootstrap Datepicker

https://jsfiddle.net/codeandcloud/acq7t97c/

or JQuery Datepicker

http://jsfiddle.net/klenwell/LcqM7/

Answer 2

As you are using Bootstrap, I recommend using Bootstrap Datepicker.

In your site, give an id to the date input fields and initialize as below.

$(document).ready(function(){
    $("#startdate").datepicker();
    $("#enddate").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>

<input id="startdate">
<input id="enddate">

Answer 3

It looks like you are using jQuery's datepicker?

You are trying to execute this line

$( "#datepicker" ).datepicker();

but you don't have any element with an id datepicker.

Try adding the id datepicker to your input if you want the entire input to change into datepicker on click. Added id datepicker to your input with the class start_date.

<div class="dates">
  <div class="start_date">
    <input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
    <span class="fa fa-calendar start_date_calendar" aria-hidden="true "> 
    </span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date">
    <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
  </div>
</div>

Answer 4

Just an Id to the Calendar icon and click action to the corresponding icon using javascript

        $(document).ready(function() {
          $('#calendar1').click(function(event) {
            $('.start_date').datepicker('show');
          });


          $('#calendar2').click(function(event) {
            $('.end_date').datepicker('show');
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <div class="container">
    <div class="row">
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar1">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar2">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
        </div>
        </div>
        </div>
        </div>