bootstrap中关于时间控件

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel = "stylesheet" type="text/css" href = "./assets/datetimepicker/css/bootstrap-datetimepicker.css" / >
<style>
 #ipt::after {
 content: "222";
 display: block;
 width: 5px;
 height: 8px;
 color: red;
 outline: none;
 }

 * {
 box-sizing: border-box;
 }

 #box {
 width: 600px;
 margin: 0 auto;
 padding: 35px;
 }

 #box2 {
 height: 350px;
 border: 1px solid #ccc;
 overflow-y: auto;
 padding: 30px;
 }

 #box2 p {
 margin: 0 auto;
 text-align: center;
 }

 #top_nav {
 position: fixed;
 top: 5px;
 left: 50%;
 width: 200px;
 margin-left: -100px;
 }

 input.datetimepicker {
 margin-top: 10px;
 outline: none;
 border: 1px solid #ccc;
 }
</style>

<p id="box">
 <p id="top_nav">娣诲姞鏃堕棿鎺т欢 <button type="button" id="btn2">娣诲姞</button></p>
 <p id="box2"></p>
</p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="./assets/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./assets/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $(function () {
 var timeNum = 1;
 var addTime =
 '<p class="time-p"><input type="text" value="2017-09-10" class="datetimepicker"><span>  閫夋嫨鏃堕棿</span></p>';
 $("#btn2").on("click", function () {
 var $addTime = $(addTime).children().attr("id", "time" + timeNum).end()
 $("#box2").append($addTime);
 activeTime(("#time" + timeNum));
 timeNum++;
 })

 function activeTime(tagid) {
 $(tagid).datetimepicker({
 format: 'yyyy-mm-dd',
 language: 'zh-CN',
 weekStart: 1,
 bootcssVer: 3,
 todayBtn: 1,
 autoclose: 1,
 todayHighlight: true,
 startView: 2,
 minView: 2,
 pickerPosition: 'bottom-right',
 forceParse: 0,
 keyboardNavigation: 1,
 forceParse: 1
 });
 }
 activeTime("#time1")
 })
</script>