bootstrap时间控件--时间选择器

对应上面的三个时间选择器，写法如下：

首先引入css和js：

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

然后html部分：

 <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <label>选择开始时间：</label>
                <!--指定 date标记-->
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <label>选择结束时间：</label>
                <!--指定 date标记-->
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <label>选择结束时间：</label>
                <!--指定 date标记-->
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    

最后js部分：

    $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });
    $('#datetimepicker2').datetimepicker({
        format: 'HH:mm',
        locale: moment.locale('zh-cn')
    });
    $('#datetimepicker3').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        locale: moment.locale('zh-tw')
    });
});

解释：

format	日期格式	YYYY-MM-DD：2019-01-10 HH:mm24小时格式 hh:mm12小时格式 YYYY-MM-DD HH:mm 比如：2019-01-01 23：59 HH:mm:ss 带秒数的24小时格式
locale	时间地区	zh-cn是中国

参考：bootstrap4日期时间选择器插件_jQuery之家-自由分享jQuery、html5、css3的插件库