单击图标显示日期

Question

我正在创建输入字段以显示日历日期。现在我只能单击输入字段来显示日历日期。实际上，我想点击日历图标显示日历日期，然后日历日期将显示在输入字段中，而不是点击输入字段显示日历。希望有人能指导我如何解决它。谢谢

下面是我的编码：

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

这是我的输出：

其实我想要的是下图这样的效果。可以点击图标显示日期然后选择日期后可以在输入字段中显示：

Answer 1

这样试试：

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

示例如下

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

单击图标显示日期

Icon clicking to show the date

html

javascript

calendar