Kliknutím na ikonu zobrazíte datum

Vytvářím vstupní pole pro zobrazení kalendářního data. Nyní mohu pouze kliknout na vstupní pole a zobrazit datum kalendáře. Ve skutečnosti chci kliknout na ikonu kalendáře, aby se zobrazilo datum kalendáře, pak se datum kalendáře zobrazí ve vstupním poli, ne kliknutím na vstupní pole pro zobrazení kalendáře. Doufám, že mi někdo poradí, jak to vyřešit. Děkuji.

Níže je moje kódování:

<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>

Toto je můj výstup:

Vlastně chci očekávaný výsledek jako pod obrázkem. Můžete kliknout na ikonu a zobrazit datum, poté se po výběru data může zobrazit ve vstupním poli:

Odpověď

Zkuste to takto:

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

Zde je příklad

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

<link rel="stylesheet" href="https://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>