bootstrap中的基于jQuery的时间选择器

时间选择器一般是在项目中应用比较广泛的，在网上找到了bootstrap的时间选择器，比较强大而且内容比较丰富，同样看起来简洁，很好用。

1、bootstrap官网下载zip包 网页链接：http://www.bootcss.com/p/bootstrap-datetimepicker

2、引入css、js文件（肯定要引入jQuery的js文件以及bootstrap的css文件的，下面是时间选择器特有的js以及css文件）

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

bootstrap-datetimepicker.zh-CN.js（设置时间的语言形式的，这里引入简体中文就可以了，当然bootstrap提供了比较丰富的语言形式，在locals文件夹下面找到你需要的）

3、使用的时候，核心的是设置时间选择器的属性值，这个在网上找到了一个比较全面的，Thank you

（1）在网页中，需要插入时间选择器的地方，做一个input标签（这里面的id值是随便写的，只要是后面设置属性的时候选取到这个input标签就可以了）

时间：<input type="text" value="2017-07-20 00:00" id="datetimepicker">

（2）设置时间选择器的属性（直接把大神设置的拿过来了，不过他的代码有两个错误 开始那多了一个单引号、maxView后面写的是中文状态下的“：号”，已改正）

$("#datetimepicker").datetimepicker({

        format: "yyyy-mm-dd hh:ii:ss",//设置时间格式，默认值: 'mm/dd/yyyy'

        weekStart : 0, //一周从哪一天开始。0（星期日）到6（星期六）,默认值0

        startDate : "2013-02-14 10:00",//可以被选择的最早时间

        endDate : "2016-02-14 10:00",//可以被选择的最晚时间

        daysOfWeekDisabled : "0,6",//禁止选择一星期中的某些天，例子中这样是禁止选择周六和周日

        autoclose : true,//当选择一个日期之后是否立即关闭此日期时间选择器

        startView : 2,//点开插件后显示的界面。0、小时1、天2、月3、年4、十年，默认值2

        minView : 0,//插件可以精确到那个时间，比如1的话就只能选择到天，不能选择小时了

        maxView : 4,//同理

        todayBtn : true,//是否在底部显示“今天”按钮

        todayHighlight : true,//是否高亮当前时间

        keyboardNavigation : true,//是否允许键盘选择时间

        language : 'zh-CN',//选择语言，前提是该语言已导入

        forceParse : true,//当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中

        minuteStep : 5,//分钟的间隔

        pickerPosition : "bottom-right",//显示的位置，还支持bottom-left

        viewSelect : 0,//默认和minView相同

        showMeridian : true,//是否加上网格，true的话显示上下午

        initialDate : "2015-02-14 10:00"//初始化的时间

});

这样，就可以引入时间选择器了。下面是效果图，给人的感觉特好看，嘿嘿！

   

注意事项：

在时间选择完成之后，会有一个表格形式的数据展示功能，可是在从后台获取数据的时候，拼接表格的时候，我直接写成$("table>tbody").html(table);

这样将会对时间选择器造成影响，就是第二幅图那个倒霉模样，因为本身他这个时间选择器也是表格的形式，搞得我都头大了，最后慢慢找出了原因，解决了，以后注意方法，错误总是不可避免的，重要的是解决错误的方法，提升解决错误的能力，才是学习的重点。