有了上面的数字组件作为基础，接下来就是封装时间组件了。博主同样打算使用data属性去做初始化，可是找了半天文档，datatimepicker里面没有自带data属性初始化的方式，没办法，只有博主自己去做data属性的初始化了。
1、初始方案
我们新建一个文件：bootstrap-datetimepicker-helper.js。里面的代码如下
$(function () { var datetimedefault = { locale: 'zh-CN', //中文化 }; $.each($(".date"), function (index, item) { var data = $(item).data(); var param = $.extend({}, datetimedefault, data || {}); $(item).datetimepicker(param); }); });
然后html代码这样写
<div data-format="YYYY-MM-DD" data-maxDate="2017-01-10" data-minDate="2010-01-10"> <input type='text' /> <span> <span></span> </span> </div>
貌似都没有问题，起初博主也以为没有任何问题。可是事与愿违！这里有一点博主没有考虑到，那就是Jquery里面的data()方法取到的属性名会全部转小写，也就是说，我们html里面写的data-maxDate，可是通过data()方法得到的结果却变成了maxdate，如下图：
然后在初始化datetimepicker的时候就报了js异常。此法行不通。
2、改进方案
既然上面的方法行不通，那我们就要改进啊，data()方法是否存在什么参数可以让它不转小写的？找了一圈，没找到啥答案。最后没办法，博主打算自行改造，于是js代码变成了这样：
$(function () { var datetimedefault = { format: 'YYYY-MM-DD',//日期格式化，只显示日期 locale: 'zh-CN', //中文化 maxDate: '2017-01-01',//最大日期 minDate: '2010-01-01', //最小日期 viewMode: 'days', defaultDate: false, disabledDates: false, enabledDates: false, }; $.each($(".date"), function (index, item) { var data = $(item).data(); $.each(data, function (key, value) { for (i in datetimedefault) { if (key == i.toLowerCase()) { datetimedefault[i] = value; break; } } }); //var param = $.extend({}, datetimedefault, data || {}); $(item).datetimepicker(datetimedefault); }); });
原理就是比较data()方法得到的结果和datetimedefault的属性名转小写后进行对比，如果相同，则将html里面的data属性覆盖默认的属性。调试了几遍，基本没发现什么问题。
代码写成这样，确实可以解决我们上面的问题，但是需要我们的datetimedefault变量里面包含足够多的默认参数，这样才能达到覆盖的目的，当然项目中一般修改的就那么几个参数，这里只需要加上一些我们经常需要变化的默认属性即可。
好了，有上面的作为理论基础，我们的DataTimeBox也就好封装了。直接上代码吧。