title: How to make the calendar popup on click of a calendar icon ?
body: <p>I am working on the <a href="http://ferhan.ferohost.com/" rel="nofollow noreferrer">website</a> in which I want to popup the calendar on hitting calendar icon. </p>
  
  <p>The HTML code which I have used in order to place <strong>Start Date</strong> and <strong>End Date</strong> are:</p>
  
  <pre><code>&lt;div class="dates"&gt;
     &lt;div class="start_date"&gt;
        &lt;input class="form-control start_date mb-4" type="text" placeholder="start date"&gt;
        &lt;span class="fa fa-calendar start_date_calendar" aria-hidden="true "&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="end_date"&gt;
        &lt;input class="form-control  end_date mb-4" type="text" placeholder="end date"&gt;
        &lt;span class="fa fa-calendar end_date_calendar" aria-hidden="true "&gt;&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>Problem Statement:</strong> </p>
  
  <p>I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below). </p>
  
  <p>I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.</p>
  
  <pre><code>&lt;script&gt;
    $( function() {
      $( "#datepicker" ).datepicker();
    } );
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/g0iuU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g0iuU.jpg" alt="enter image description here"></a></p>