Question

我在这里使用bootstrap是我的代码。

enterBinop

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

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

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

查看工作示例

希望它对你有所帮助.. 享受：）

我需要一次显示一个日历

1 个答案: