<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>
【相关视频推荐:Bootstrap教程】
Atas ialah kandungan terperinci bootstrap中关于时间控件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!