如何使用bootstrap-datepicker沙箱

Question

我正在使用angular 4，我想使用bootstrap-datepicker沙箱，下面是代码：

<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
});

但是当我单击此输入文本字段时，不会显示datepicker。

Answer 1

希望这会对您有所帮助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> 

您选择了错误的选择器。

Answer 2

 $('#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 ，您必须将日历输入放入其中或删除该选择器。

希望能帮助到你！