如何在点击日历图标时弹出日历？

Question

我在我想在点击日历图标时弹出日历的 网站 上工作。

我用来放置 开始日期 和 结束日期 的 HTML 代码是：

 <div class="dates">
   <div class="start_date">
      <input class="form-control start_date mb-4" type="text" placeholder="start date">
      <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>

问题陈述：

我想知道我必须使用什么 js/jquery 代码才能在点击左侧和右侧的日历图标时弹出日历（在下面的屏幕截图中用箭头标记）。

我尝试放置以下代码，但不知何故我无法在点击日历图标时弹出日历。

 <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

原文由 flash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您使用 Bootstrap 时，我建议您使用 Bootstrap Datepicker 。

在您的站点中，为日期输入字段提供 id 并初始化如下。

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

原文由 Vignesh Raja 发布，翻译遵循 CC BY-SA 4.0 许可协议