如何使用引导-数据采集沙箱

Question

我使用的是角4，我想使用引导-数据交换沙箱，下面是代码：

<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker3.standalone.min.css">
<!-- Bootstrap -->
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- Main jQuery -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="./assets/libs/datepicker/js/bootstrap-datepicker.min.js"> </script>

  <div class="input-group date">
   <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
  </div>

component.ts：

 $('#sandbox-container .input-group.date').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});

但是当我点击这个输入文本字段时，数据报警器就不会出现了。

Answer 1

​

$('#sandbox-container .input-group.date').datepicker({
  startDate: "-12/30/2014",
  endDate: "+01/15/2015",
  startView: 1,
  clearBtn: true,
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css">
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Main jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js">
</script>

<div id="sandbox-container">
  <div class="input-group date">
    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
  </div>
</div>

​

问题是选择器#sandbox-container，您必须将日历输入放入其中或删除该选择器。

希望它能帮上忙！

Answer 2

希望这能帮到你https://jsfiddle.net/m6Ls4w4w/

​

$('.date').datepicker({
  startDate: "-12/30/2014",
  endDate: "+01/15/2015",
  startView: 1,
  clearBtn: true,
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<div class="input-group date">
   <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

​

你选错人了。