我需要一次显示一个日历

Question

我正在使用引导程序，这是我的代码。

<div class="col-md-3 col-xs-6">
    <div class="input-group date mg-check-in">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        <input class="datepicker" type="text" name="date" id="exampleInputEmail1" placeholder="Check In">
    </div>
</div>
<div class="col-md-3 col-xs-6">
    <div class="input-group date mg-check-out">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        <input class="datepicker" type="text" name="date" id="exampleInputEmail1" placeholder="Check Out">
    </div>
</div>

这是脚本。我也在这里使用 datepicker js。 * http://www.eyecon.ro/bootstrap-datepicker

<script type="text/javascript">
$ (function() {
    $('.datepicker').datepicker();
});
</script>

Answer 1

首先你需要从Link下载最新版本的插件资产，然后试试下面的代码：

HTML：

<div class="col-md-3 col-xs-6">
  <div class="input-group date mg-check-in">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input class="datepicker form-control" type="text" name="date" id="dp1" placeholder="Check In">
  </div>
</div>
<div class="col-md-3 col-xs-6">
  <div class="input-group date mg-check-out">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input class="datepicker form-control" type="text" name="date" id="dp2" placeholder="Check Out">
  </div>
</div> 

JS：

$('#dp1, #dp2').datepicker({
   autoclose: true
 })

在CODEPEN查看工作示例

希望对你有帮助.. 享受:)