[英]how to use bootstrap-datepicker sandbox
i'm using angular 4, i want to use bootstrap-datepicker sandbox, heres the code : 我正在使用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 : 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
});
but when i click this the input text field, the datepicker doesnt appears. 但是当我单击此输入文本字段时,不会显示datepicker。
Hope this will help you https://jsfiddle.net/m6Ls4w4w/ 希望这会对您有所帮助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>
You are giving wrong selector. 您选择了错误的选择器。
$('#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>
The problem is the selector #sandbox-container
, you have to put the calendar input into it or remove that selector. 问题是选择器
#sandbox-container
,您必须将日历输入放入其中或删除该选择器。
Hope it helps! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.