Icon clicking to show the date

I am creating the input field to show the calendar date. Now I just only can click the input field to show the calendar date. Actually, I want to click the calendar icon to show the calendar date, then the calendar date will show in the input field, not click the input field to show the calendar. Hope someone can guide me on how to solve it. Thanks.

Below is my coding:

<div class="col-lg-12" style="margin-top:10px;">
    <label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;">&nbsp;*</span></label>
        <div class="input-group col-lg-6">
      &nbsp <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
    </div>
 </div>

This is my output:

Actually, I want the expected result like below the picture. Can click the icon show the date then after choosing the date can show in the input field:

Answer

Try like this:

$(document).ready(function() {
$('.fa-calendar').click(function(){
   $(document).ready(function(){
       $("#document_date").datepicker().focus();
     });
   });
 });

Here is the example

$(document).ready(function() {
  $('.fa-calendar').click(function(){
       $(document).ready(function(){
           $("#document_date").datepicker().focus();
       });
   });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
<div class="col-lg-12" style="margin-top:10px;">
    <label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;">&nbsp;*</span></label>
        <div class="input-group col-lg-6">
      &nbsp <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
    </div>
 </div>

Advertisement

Answer