使用Bootstrap编写时间范围选择控件

Bootstrap是Twitter开发的前端框架，后来深受广大开发者喜爱，简洁又美观。这里分享一下使用bootstrap中时间选择控件的经验。
1 引入css和js环境

  bootstrap.min.css   //bootstrap核心组件样式表
  bootstrap-datetimepicker.min.css  //datetimepicker样式表
  bootstrap.min.js     //bootstrap核心js
  bootstrap-datetimepicker.js     //时间选择控件js
  jquery-2.2.4.js     //还要引入jquery，版本号根据自己需要

2 在html页面中引用

<script src="../../js/jquery-2.2.4.js" charset="utf-8"></script>
<!-- Bootstrap核心JavaScript文件 -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.js"></script>

3 使用
这里我写了一个开始，一个结束，两个时间控件

<input type="text" value="2017-06-01 00:00" id="begin" readonly> 
<input type="text" value="2017-06-18 00:00" id="end" readonly>

<script type="text/javascript">
        $('#begin').datetimepicker({
            format : 'yyyy-mm-dd hh:ii' /*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
        });
        $('#end').datetimepicker({
            format : 'yyyy-mm-dd hh:ii' /*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
        });
</script>

如上，就可以使用了，下面贴上效果图，这个只是基本款，大家可以根据需要添加js里的属性

具体参数设置请参考：http://www.bootcss.com/p/bootstrap-datetimepicker/