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>&nbsp;&nbsp;閫夋嫨鏃堕棿</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教程】

以上就是bootstrap中关于时间控件的详细内容，更多请关注Gxl网其它相关文章！