bootstrap-datetimepicker.js学习
之前项目运用到了这个时间控件，期间bug还是一些。抽个时间，简单地看一下。
先看一下datetimepicker.js的结构
var DateTimePicker = function(element, options){}//构造器 var dateToDate = function(dt){} DateTimePicker.prototype ={}//构造器的原型 $.fn.datetimepicker = function ( option, val ){}//jQuery原型对象上的方法 $.fn.datetimepicker.defaults ={}//默认配置参数 $.fn.datetimepicker.Constructor = DateTimePicker; //以下是一些默认信息和配置内容 var dpgId = 0; var dates = $.fn.datetimepicker.dates = {} var dateFormatComponents = {} function escapeRegExp(str){} ....//自定义方法 var DPGlobal ={} DPGlobal.template ='' //日期控件页面 var TPGlobal = {} TPGlobal.getTemplate = function(is12Hours, showSeconds) {}//时分秒控件页面模版
来看一下HTML的例子
<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="datepicker.css"> </head> <body> <div id="datetimepicker" class="input-append date"> <input type="text"/> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript" src="bootstrap.js"> </script> <script type="text/javascript" src="bootstrap-dateTimePicker.js"> </script> <script type="text/javascript"> $('#datetimepicker').datetimepicker({ format: 'MM/dd/yyyy hh:mm', language: 'en', pickDate: true, pickTime: true, hourStep: 1, minuteStep: 15, secondStep: 30, inputMask: true }); </script> </body> <html>
可以看到页面上调用了datetimepicker方法，这个插件在页面使用时，需要手动初始化。下面简单地列出插件运作流程。
在我们看init方法之前，先看一下传入default信息
我们再来看一下init方法
init: function(element, options) { var icon; if (!(options.pickTime || options.pickDate)) throw new Error('Must choose at least one picker'); this.options = options; this.$element = $(element); this.language = options.language in dates ? options.language : 'en'; this.pickDate = options.pickDate;//true this.pickTime = options.pickTime;//true this.isInput = this.$element.is('input');//判断是否为input控件 this.component = false; if (this.$element.find('.input-append') || this.$element.find('.input-prepend')) this.component = this.$element.find('.add-on');//获得触发时间控件的按钮 this.format = options.format;//控件显示日期的格式 if (!this.format) { if (this.isInput) this.format = this.$element.data('format'); else this.format = this.$element.find('input').data('format');//寻找input控件data属性定义的时间格式 if (!this.format) this.format = 'MM/dd/yyyy';//如果都没有定义，采用系统默认格式MM/dd/yyyy } this._compileFormat();//根据日期显示格式，封装正则表达式，拼接正则表达式 if (this.component) { icon = this.component.find('i');//找到控件上的时间小标签(图标) } if (this.pickTime) { if (icon && icon.length) this.timeIcon = icon.data('time-icon'); if (!this.timeIcon) this.timeIcon = 'icon-time';//如果页面上没有写data-time-icon， icon.addClass(this.timeIcon);//这里系统默认帮你填上,类名为icon-time } if (this.pickDate) { if (icon && icon.length) this.dateIcon = icon.data('date-icon'); if (!this.dateIcon) this.dateIcon = 'icon-calendar';//如果页面上没有写data-date-icon属性。 icon.removeClass(this.timeIcon);//系统将统一添加icon-calendar类，删除icon-time类 icon.addClass(this.dateIcon);//类名为icon-calendar } //拼接完控件页面插入body中，返回拼接的jQuery的dom对象 this.widget = $(getTemplate(this.timeIcon, options.pickDate, options.pickTime, options.pick12HourFormat, options.pickSeconds, options.collapse)).appendTo('body'); this.minViewMode = options.minViewMode||this.$element.data('date-minviewmode')||0; if (typeof this.minViewMode === 'string') { switch (this.minViewMode) { case 'months': this.minViewMode = 1; break; case 'years': this.minViewMode = 2; break; default: this.minViewMode = 0; break; } } this.viewMode = options.viewMode||this.$element.data('date-viewmode')||0; if (typeof this.viewMode === 'string') { switch (this.viewMode) { case 'months': this.viewMode = 1; break; case 'years': this.viewMode = 2; break; default: this.viewMode = 0; break; } } this.startViewMode = this.viewMode; this.weekStart = options.weekStart||this.$element.data('date-weekstart')||0; this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1; this.setStartDate(options.startDate || this.$element.data('date-startdate'));//设置StartDate this.setEndDate(options.endDate || this.$element.data('date-enddate'));// 设置endDate this.fillDow();//生成星期标题 this.fillMonths();//生成月份标题 this.fillHours();//生成小时面板 this.fillMinutes();//生成分钟面板 this.fillSeconds();//生成秒钟面板 this.update();//填写面板 this.showMode();//显示默认面板 this._attachDatePickerEvents();//绑定触发事件 }
再看一下_compileFormat()方法
_compileFormat: function () { var match, component, components = [], mask = [], str = this.format, propertiesByIndex = {}, i = 0, pos = 0; while (match = formatComponent.exec(str)) { component = match[0]; if (component in dateFormatComponents) { i++; propertiesByIndex[i] = dateFormatComponents[component].property;//取property属性 components.push('\\s*' + dateFormatComponents[component].getPattern( //根据component取到getPattern中返回字符串正则，加进行拼接 this) + '\\s*'); mask.push({ //重新装箱 pattern: new RegExp(dateFormatComponents[component].getPattern( this)), property: dateFormatComponents[component].property, start: pos,//日期格式长度从第0位开始 end: pos += component.length//结束位置，是该结构的长度 }); } else { components.push(escapeRegExp(component)); mask.push({ pattern: new RegExp(escapeRegExp(component)), character: component, start: pos, end: ++pos//特殊字符，一般都是一位 }); } str = str.slice(component.length);//删掉已经匹配处理过的字符串,然后继续循环，这个匹配完这个字符串 } this._mask = mask;//将封装过的信息传给实例 this._maskPos = 0; this._formatPattern = new RegExp( '^\\s*' + components.join('') + '\\s*$');//最后将加工过的正则再拼成一个大的正则，传给实例 this._propertiesByIndex = propertiesByIndex; }
以上的内容还是比较简单，我们需要配合默认参数来看。
dateFormatComponents：
最后拼接成一个大的正则表达式。正则比较长，但比较简单
再看一下getTemplate方法
//获取时间控件页面(这里将时间控件页面分成两块，1是日期页面，2是时分秒页面) function getTemplate(timeIcon, pickDate, pickTime, is12Hours, showSeconds, collapse) { //这里是可以选择的是否使用date或time，通过配置pickDate和pickTime来控制 if (pickDate && pickTime) { return (//拼接时间控件的html '<div class="bootstrap-datetimepicker-widget dropdown-menu">' + '<ul>' + '<li' + (collapse ? ' class="collapse in"' : '') + '>' + '<div class="datepicker">' + DPGlobal.template + //DPGlobal.template是一个日期页面 '</div>' + '</li>' + '<li class="picker-switch accordion-toggle"><a><i class="' + timeIcon + '"></i></a></li>' + '<li' + (collapse ? ' class="collapse"' : '') + '>' + '<div class="timepicker">' + TPGlobal.getTemplate(is12Hours, showSeconds) + '</div>' + '</li>' + '</ul>' + '</div>' ); } else if (pickTime) { return ( '<div class="bootstrap-datetimepicker-widget dropdown-menu">' + '<div class="timepicker">' + TPGlobal.getTemplate(is12Hours, showSeconds) + '</div>' + '</div>' ); } else { return ( '<div class="bootstrap-datetimepicker-widget dropdown-menu">' + '<div class="datepicker">' + DPGlobal.template + '</div>' + '</div>' ); } }
以上的代码是生成插件模版，以上分为两种控件页面模版(日期控件页面和时分秒控件页面模版)
//日期控件页面 DPGlobal.template = '<div class="datepicker-days">' + '<table class="table-condensed">' + DPGlobal.headTemplate + '<tbody></tbody>' + '</table>' + '</div>' + '<div class="datepicker-months">' + '<table class="table-condensed">' + DPGlobal.headTemplate + DPGlobal.contTemplate+ '</table>'+ '</div>'+ '<div class="datepicker-years">'+ '<table class="table-condensed">'+ DPGlobal.headTemplate+ DPGlobal.contTemplate+ '</table>'+ '</div>';
上图就是日期控件,注意，这里只是生成标题，类似Su,Mo,Tu,We,Th,Fr,Sa。具体的下面的日期需要靠别的方法往里面填写，init方法里还有几个方法是创建方法
fillDow方法
//生成星期标题 fillDow: function() { var dowCnt = this.weekStart; var html = $('<tr>'); while (dowCnt < this.weekStart + 7) { html.append('<th class="dow">' + dates[this.language].daysMin[(dowCnt++) % 7] + '</th>'); }//生成 this.widget.find('.datepicker-days thead').append(html);//找到thead插入 }
注意这里while的循环的，可以看到循环7次。以上的代码，可以生成如下的插件内容：
fillMonths方法
//生成月份标题 fillMonths: function() { var html = ''; var i = 0; while (i < 12) { html += '<span class="month">' + dates[this.language].monthsShort[i++] + '</span>'; } this.widget.find('.datepicker-months td').append(html); }
生成的方式跟星期标题一致，循环了12次，再看一下生成的插件内容：
fillHours方法
//生成小时选择标题 fillHours: function() { var table = this.widget.find( '.timepicker .timepicker-hours table'); table.parent().hide();//将小时选择面板隐藏 var html = ''; if (this.options.pick12HourFormat) { var current = 1; for (var i = 0; i < 3; i += 1) { html += '<tr>'; for (var j = 0; j < 4; j += 1) { var c = current.toString(); html += '<td class="hour">' + padLeft(c, 2, '0') + '</td>'; current++; } html += '</tr>' } } else { var current = 0; for (var i = 0; i < 6; i += 1) {//循环24次，完成小时面板上小时显示 html += '<tr>'; for (var j = 0; j < 4; j += 1) { var c = current.toString();//转成字符串 html += '<td class="hour">' + padLeft(c, 2, '0') + '</td>'; current++;//js是弱类型语言 } html += '</tr>' } } table.html(html); }
这里有一个padLeft方法，我们来看一下：
function padLeft(s, l, c) {//如何长度是1为，就采用0与数字组合，如果数字长度为两位，则直接返回这个数字 if (l < s.length) return s; else return Array(l - s.length + 1).join(c || ' ') + s; }
看一下这个fillHour方法，两个for循环一共运行了24次，大家可以想到。一天是24个小时，将类似1，2的小时点数通过padLeft方法转成01，02..。然后往table中插入，给出以上代码生成的插件内容
fillMinutes方法
//生成分钟选择标题 fillMinutes: function() { var table = this.widget.find( '.timepicker .timepicker-minutes table'); table.parent().hide(); var html = ''; var current = 0; for (var i = 0; i < 5; i++) {//循环20次，每次添加3，完成60的遍历 html += '<tr>'; for (var j = 0; j < 4; j += 1) { var c = current.toString(); html += '<td class="minute">' + padLeft(c, 2, '0') + '</td>'; current += 3; } html += '</tr>'; } table.html(html); }
基本和fillHour方法一致。遍历20次，每次添加3，完成60的遍历，正好对应1个小时是60分钟。生成的插件内容。
fillSecond方法
//生成秒钟选择标题 fillSeconds: function() { var table = this.widget.find( '.timepicker .timepicker-seconds table'); table.parent().hide(); var html = ''; var current = 0;//给分钟类似 for (var i = 0; i < 5; i++) { html += '<tr>'; for (var j = 0; j < 4; j += 1) { var c = current.toString(); html += '<td class="second">' + padLeft(c, 2, '0') + '</td>'; current += 3; } html += '</tr>'; } table.html(html); }
生成的插件内容为：
以上的内容跟分钟内容是一致的。但它们是两个页面。
再来看一下update方法
//填写面板 update: function(newDate){ var dateStr = newDate; if (!dateStr) { if (this.isInput) {//是否是input控件 dateStr = this.$element.val(); } else { dateStr = this.$element.find('input').val();//取到input里的内容信息 } if (dateStr) { this._date = this.parseDate(dateStr); } if (!this._date) { var tmp = new Date() this._date = UTCDate(tmp.getFullYear(), tmp.getMonth(), tmp.getDate(), tmp.getHours(), tmp.getMinutes(), tmp.getSeconds(), tmp.getMilliseconds()) } } this.viewDate = UTCDate(this._date.getUTCFullYear(), this._date.getUTCMonth(), 1, 0, 0, 0, 0); this.fillDate();//填写月份面板和年份面板 this.fillTime();//填写小时面板 }
这里我们可以看到this._date是input(插件中)里的内容，如果我们第一次使用插件，肯定没有任何时间信息，那这个时候this._date则等于当前时间(new Date()),这里我们再看一下UTCDate()方法
function UTCDate() { return new Date(Date.UTC.apply(Date, arguments)); }
Date.UTC方法是可根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。在将这个毫秒数传入Date中，再转成UTC格式的时间，这个方法的作用是通过传入年，月，日，小时，分钟，秒钟，最后转成UTC格式的日期。
fillDate方法，这个方法我们分成两个部分来看。
先看第一部分：
//生成月份面板和年份面板 fillDate: function() { var year = this.viewDate.getUTCFullYear();//获取当前日期的年份 var month = this.viewDate.getUTCMonth();//获取当前日期所在的月份 var currentDate = UTCDate( this._date.getUTCFullYear(), this._date.getUTCMonth(), this._date.getUTCDate(), 0, 0, 0, 0 );//获取当前日期 var startYear = typeof this.startDate === 'object' ? this.startDate.getUTCFullYear() : -Infinity; var startMonth = typeof this.startDate === 'object' ? this.startDate.getUTCMonth() : -1; var endYear = typeof this.endDate === 'object' ? this.endDate.getUTCFullYear() : Infinity; var endMonth = typeof this.endDate === 'object' ? this.endDate.getUTCMonth() : 12; this.widget.find('.datepicker-days').find('.disabled').removeClass('disabled'); this.widget.find('.datepicker-months').find('.disabled').removeClass('disabled'); this.widget.find('.datepicker-years').find('.disabled').removeClass('disabled'); this.widget.find('.datepicker-days th:eq(1)').text( dates[this.language].months[month] + ' ' + year);//根据input控件里所填写的信息生成日期标题 var prevMonth = UTCDate(year, month-1, 28, 0, 0, 0, 0);//获取上一个月的内容 var day = DPGlobal.getDaysInMonth( prevMonth.getUTCFullYear(), prevMonth.getUTCMonth()); prevMonth.setUTCDate(day);//获得的前一个月的天数，将这个天数赋给这个prevMonth prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7) % 7); if ((year == startYear && month <= startMonth) || year < startYear) { this.widget.find('.datepicker-days th:eq(0)').addClass('disabled'); } if ((year == endYear && month >= endMonth) || year > endYear) { this.widget.find('.datepicker-days th:eq(2)').addClass('disabled'); } var nextMonth = new Date(prevMonth.valueOf()); nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);//设置下一个月 nextMonth = nextMonth.valueOf(); var html = []; var row; var clsName; while (prevMonth.valueOf() < nextMonth) { if (prevMonth.getUTCDay() === this.weekStart) { row = $('<tr>'); html.push(row); } clsName = ''; if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {//如果不是当前月的日期时，是上一个月则需要加上old类，灰化效果 clsName += ' old'; } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {//如果是下一个月的则需要加上new类，也是灰化效果 clsName += ' new'; } if (prevMonth.valueOf() === currentDate.valueOf()) {//将当前被选中的日期加上active类，高亮效果 clsName += ' active'; } if ((prevMonth.valueOf() + 86400000) <= this.startDate) { clsName += ' disabled'; } if (prevMonth.valueOf() > this.endDate) { clsName += ' disabled'; } row.append('<td class="day' + clsName + '">' + prevMonth.getUTCDate() + '</td>');//这里循环生成日期内容 prevMonth.setUTCDate(prevMonth.getUTCDate() + 1);//依次加1 } this.widget.find('.datepicker-days tbody').empty().append(html);//先清空后再添加上信息
this.widget.find('.datepicker-days th:eq(1)').text(dates[this.language].months[month] + ' ' + year);这里生成的插件内容
其中生成October，是通过dates[this.language].month寻找对应的英语内容，下面是语言包内容
var dates = $.fn.datetimepicker.dates = { //语言包，可以自己定义 en: { days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] } }
while循环中使用html去保存生成的dom内容，使用prevMonth.getUTCDate()+1进行迭代。依次生成日期内容，插件这里提供了一个非常不错的思路：通过UTCDate生成标准的UTC日期，然后再通过DPGlobal.getDaysInMonth()获取这个月的天数，然后再去遍历天数显示出这个月的日期，至于页面上效果，通过比较当前月，设置出较之当前月的前一个月和后一个月灰化效果。那我们再看一下DPGlobal.getDaysInMonth()方法
isLeapYear: function (year) {//判断是否是闰年 return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) }, getDaysInMonth: function (year, month) {//获取某月的天数 //简单地将十二个月的天数写在一个数组里，通过month标签获取该月数的天数 return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] }
先比较是否是闰年，将一年的月份放入一个数组中，通过我们的month下标去获取月数的天数。
ok，以下我们来看一下生成效果：
至于高亮部分，是通过以下代码实现
if (prevMonth.valueOf() === currentDate.valueOf()) {//将当前被选中的日期加上active类，高亮效果 clsName += ' active'; }
row.append('<td class="day' + clsName + '">' + prevMonth.getUTCDate() + '</td>')
再来看另一部分
html = '';//清空html year = parseInt(year/10, 10) * 10; var yearCont = this.widget.find('.datepicker-years').find( 'th:eq(1)').text(year + '-' + (year + 9)).end().find('td'); this.widget.find('.datepicker-years').find('th').removeClass('disabled'); if (startYear > year) { this.widget.find('.datepicker-years').find('th:eq(0)').addClass('disabled'); } if (endYear < year+9) { this.widget.find('.datepicker-years').find('th:eq(2)').addClass('disabled'); } year -= 1; for (var i = -1; i < 11; i++) { html += '<span class="year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + ((year < startYear || year > endYear) ? ' disabled' : '') + '">' + year + '</span>'; year += 1; } //每一个年份面板上，将第一个和最后一个灰化，这里对于disabled不可用的情况，我们需要自己设定startYear和endYear的值才可以 yearCont.html(html);//填入内容
这里使用html保存dom内容，最后通过yearCont.html(html)插入html文档中，看一下生成内容
高亮效果是通过如下代码实现：
html += '<span class="year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + ((year < startYear || year > endYear) ? ' disabled' : '') + '">' + year + '</span>';
继续看fillTime方法
//生成小时面板 fillTime: function() { if (!this._date) return; var timeComponents = this.widget.find('.timepicker span[data-time-component]'); var table = timeComponents.closest('table'); var is12HourFormat = this.options.pick12HourFormat; var hour = this._date.getUTCHours();//获取input控件中的小时数值 var period = 'AM'; if (is12HourFormat) { //判断AM和PM if (hour >= 12) period = 'PM'; if (hour === 0) hour = 12; else if (hour != 12) hour = hour % 12; this.widget.find( '.timepicker [data-action=togglePeriod]').text(period); } hour = padLeft(hour.toString(), 2, '0'); var minute = padLeft(this._date.getUTCMinutes().toString(), 2, '0'); var second = padLeft(this._date.getUTCSeconds().toString(), 2, '0'); //填入相应的小时，分钟和秒钟 timeComponents.filter('[data-time-component=hours]').text(hour); timeComponents.filter('[data-time-component=minutes]').text(minute); timeComponents.filter('[data-time-component=seconds]').text(second); }
这个this._date我们之前认识过，它可以是input控件里的内容，如过控件中没有信息，那它则默认是当前系统日期。通过padLeft将1，2等字符串转成01，02等，最后将hour，minute和second写如dom中，看一下生成内容
下面我们再来看init中的倒数第二个方法showMode方法
showMode: function(dir) { if (dir) { this.viewMode = Math.max(this.minViewMode, Math.min( 2, this.viewMode + dir)); } this.widget.find('.datepicker > div').hide().filter(//这里依旧是先将year面板，month面板和days面板都隐藏了 '.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();//默认显示day面板 }
下面是最后一个方法_attachDatePickerEvents方法
//绑定事件 _attachDatePickerEvents: function() { var self = this; // this handles date picker clicks this.widget.on('click', '.datepicker *', $.proxy(this.click, this));//为datepicker下面所有的标签，绑定了this.click // this handles time picker clicks this.widget.on('click', '[data-action]', $.proxy(this.doAction, this));//这里存在bug,这里data-action属性存在小时面板也存在于小时(分钟，秒钟)详细面板 //这里绑定了this.doAction this.widget.on('mousedown', $.proxy(this.stopEvent, this));//mousedown事件 if (this.pickDate && this.pickTime) { this.widget.on('click.togglePicker', '.accordion-toggle', function(e) { e.stopPropagation(); var $this = $(this); var $parent = $this.closest('ul'); var expanded = $parent.find('.collapse.in'); //这里主要是控制显示切换 var closed = $parent.find('.collapse:not(.in)'); if (expanded && expanded.length) { var collapseData = expanded.data('collapse'); if (collapseData && collapseData.transitioning) return; expanded.collapse('hide');//切换显示 closed.collapse('show'); $this.find('i').toggleClass(self.timeIcon + ' ' + self.dateIcon); self.$element.find('.add-on i').toggleClass(self.timeIcon + ' ' + self.dateIcon);//修改 } }); } if (this.isInput) { this.$element.on({ 'focus': $.proxy(this.show, this), 'change': $.proxy(this.change, this) }); if (this.options.maskInput) { this.$element.on({ 'keydown': $.proxy(this.keydown, this), 'keypress': $.proxy(this.keypress, this) }); } } else { this.$element.on({ 'change': $.proxy(this.change, this)//为控件绑定change事件，调用了这个this.change方法 }, 'input'); if (this.options.maskInput) { this.$element.on({ 'keydown': $.proxy(this.keydown, this), 'keypress': $.proxy(this.keypress, this) }, 'input'); } if (this.component){ this.component.on('click', $.proxy(this.show, this));//为add-on标签绑定事件,触发this.show } else { this.$element.on('click', $.proxy(this.show, this)); } } }
这里出现了插件第一个比较大的bug
this.widget.on('click', '[data-action]', $.proxy(this.doAction, this));
点击空白处，导致出现这个问题：
这个bug主要是由于事件绑定而导致的我在注释中也说明了。如果想修改这个bug，方法也非常多，可以添加新class，在重新绑定新class事件。也有其他方法，大家酌情自己修改吧。
关于this.widget.on('click.togglePicker', '.accordion-toggle', function(e) {})这句的作用，其实就是小时面板跟日期面板的切换，如下图：
仔细的话，大家可以发现，只要我们点击了a标签，其外的li就会套上in类，让其显示，其他的则删去in类，让其隐藏，这一做法跟bootstrap的其他插件差不多。
ok，到此绑定完事件，我们基本结束了datetimepicker的初始化工作了，下面就是简单地看一下触发事件了
我们先列举attachDatePickerEvents方法中所出现过的触发事件方法
1.this.click
2.this.doAction
3.this.stopEvent
4.this.show
5.this.change
6.this.keydown
7.this.keypress
触发事件
1.click
在我们看click源码之前，我们有必要先看一下，这个插件为哪些控件绑定了click事件。
this.widget.on('click', '.datepicker *', $.proxy(this.click, this));可以看出为类datepicker 以下的所有标签绑定click事件,那么这个拥有类datepicker的面板主要有哪些呢？
日期面板： 月份面板： 年份面板：
从简单开始，我们可以尝试点击每个面板上的标题，左右按钮，具体的哪个日期(月份，年份)
1.1 面板标题
如果我们点击了任意面板的标题，就会进入这个插件设置好的层级菜单(面板),如上图，我们将日期，月份，年份分别列出，实际上在datetimepicker这个插件内部，将这三个面板分别定义成三个层级，日期面板为0级菜单(面板)，月份面板为1级菜单(面板)，年份面板为2级菜单(面板)，也就是说当我们点击日期面板上的October 2010这个标题时，就会进入1级菜单(月份面板)，依次类推，如果我们在年份面板上选择了2010，那插件会带我们从2级菜单回到1级菜单选择月份。这就是这个插件的升降级的处理流程。具体看一下代码：
case 'switch': this.showMode(1); break;
如果点击的是面板标题，我们会进入showMode这个方法，并传入1这个参数
//在日期面板，月份面板和年份面板间切换时，会调用这个方法，其传入的参数，作为降级处理 showMode: function(dir) { if (dir) { this.viewMode = Math.max(this.minViewMode, Math.min( 2, this.viewMode + dir));//这段代码完成降级处理，何为降级处理，即你选择完年份之后，会自动进入月份面板。选择完月份之后，会自动进入日期面板，层级递减 } this.widget.find('.datepicker > div').hide().filter(//这里依旧是先将year面板，month面板和days面板都隐藏了 '.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();//默认显示day面板 //根据降级处理过的viewMode数值在DPGlobal.model查找到对应的需要跳转的面板名称，跳转到这个面板 }
这里简单说一下代码如何控制升降级的，我们首先传入参数1，默认this.viewMode为0，当我们点击了日期的标题时，this.viewMode+1为1进入1级菜单，我们再点击月份面板的标题时，传入的参数为1，则这时的this.viewMode为2，进入2级菜单，如果此时我们再点击年份面板的标题时，传入参数依旧是1，但是注意了这里this.viewMode还是2，如果this.viewMode超过2了，就会选择2.
Math.min(2, this.viewMode + dir)
试想一下，如果this.viewMode无限减一怎么办，也没有关系，如果this.viewMode为0级时，也就是说你已经跳到日期面板时，将无法往下跳级了。
Math.max(this.minViewMode, Math.min(2, this.viewMode + dir))
代码中，最小取0，避免了无限往下跳级的情况，这里出现这个插件第二个比较蛋疼的bug，就是插件没有为0级菜单绑定关闭插件的方法，导致用户需要点击网页空白处才能完成。
1.2 左右按钮
这个比较好理解，看一下代码：
case 'prev'://左右切换月份，年份，或者一起切换 case 'next': var vd = this.viewDate;//获取当前时间(input里的或者是系统时间) var navFnc = DPGlobal.modes[this.viewMode].navFnc;//根据层级，选择需要切换是月份还是年份 var step = DPGlobal.modes[this.viewMode].navStep; if (target[0].className === 'prev') step = step * -1; vd['set' + navFnc](vd['get' + navFnc]() + step);//进行月份或着年份的递减或递增 this.fillDate();//显示在插件面板上 this.set();//显示在input中 break;
因为3个面板都存在左右切换的按钮，所以我们在使用的时候需要告诉插件，是哪一个面板，插件如何办到了？很简单，插件通过层级this.viewMode来在DPGlobal中查找相应的面板名称。经过fillDate处理在页面显示，再经过set在input框中显示
//将选中信息填入input控件中 set: function() { var formatted = ''; if (!this._unset) formatted = this.formatDate(this._date); if (!this.isInput) { if (this.component){ var input = this.$element.find('input'); input.val(formatted);//将选择出来的信息写入input框中 this._resetMaskPos(input); } this.$element.data('date', formatted);//保存选中信息 } else { this.$element.val(formatted); this._resetMaskPos(this.$element); } }
1.3 具体那个日期(月份，年份)
1.3.1 日期
case 'td'://点击日期 if (target.is('.day')) { var day = parseInt(target.text(), 10) || 1;//转成整型= var month = this.viewDate.getUTCMonth();//当前月份-1(以下可以为系统默认当前时间) var year = this.viewDate.getUTCFullYear();//当前年数 if (target.is('.old')) {//如果你选择旧的日期 if (month === 0) {//如果当前日期为1月，那我们点击上一个月的日期时，月份需要变为11(即12月份)，年数则需要减一 month = 11; year -= 1; } else { month -= 1;//如果当前日期不为1月，那我们点击一个月的日期时，月份只需要减一 } } else if (target.is('.new')) {//如果你选择新的日期 if (month == 11) {//如果当前日期为12月时，那当我们点击下一个月的日期时，月份需要变为0(即1月份)，年数则需要加一 month = 0; year += 1; } else { month += 1;//如果当前日期不为12月时，那当我们点击一下月的日期时，月份则只需要加一即可 } } this._date = UTCDate( year, month, day, this._date.getUTCHours(), this._date.getUTCMinutes(), this._date.getUTCSeconds(), this._date.getUTCMilliseconds() ); this.viewDate = UTCDate( year, month, Math.min(28, day) , 0, 0, 0, 0); this.fillDate(); this.set(); this.notifyChange(); }
逻辑在注释上写的很清楚了，不是很难。最后经过fillDate渲染，set显示在input框中。
1.3.2 月份和年份
case 'span': if (target.is('.month')) {//这里控制的是月份面板 var month = target.parent().find('span').index(target); this.viewDate.setUTCMonth(month);//将你选择的月份赋给viewDate，等会处理完显示在input控件上 } else {//这里是年份面板 var year = parseInt(target.text(), 10) || 0; this.viewDate.setUTCFullYear(year);//将你选择的年份赋给viewDate，等会处理完显示在input控件上 } if (this.viewMode !== 0) {//考虑几级菜单，这个插件认为日期面板属于0级菜单，月份属于1级，年份属于2级 this._date = UTCDate( this.viewDate.getUTCFullYear(), this.viewDate.getUTCMonth(), this.viewDate.getUTCDate(), this._date.getUTCHours(), this._date.getUTCMinutes(), this._date.getUTCSeconds(), this._date.getUTCMilliseconds() ); this.notifyChange(); } this.showMode(-1);//降级操作 this.fillDate();//降级完，将该面板数据呈现出来 this.set(); break;
这里出现了降级处理。
2. doAction
先看一下，插件中哪些部分绑定了doAction方法。this.widget.on('click', '[data-action]', $.proxy(this.doAction, this));这里我们可以知道是拥有data-action属性的标签拥有可以触发这个doAction方法，具体到插件的显示部分，我们来看一下
小时面板 小时子菜单 分钟子菜单 秒钟子菜单
之前说过这里存在bug，都在子菜单中存在，点击空白处会出现Nan，对于修改，我们最后统一修改
//关于小时面板的层级跳转控制 doAction: function(e) { e.stopPropagation(); e.preventDefault(); if (!this._date) this._date = UTCDate(1970, 0, 0, 0, 0, 0, 0); var action = $(e.currentTarget).data('action'); var rv = this.actions[action].apply(this, arguments); this.set(); this.fillTime();//通过这个fillTime显示出来 this.notifyChange(); return rv; }
如果我们仔细看一下小时面板和各个子菜单。我们可以看到它们的data-action后面的内容都不相同，这就是插件去判断到底是谁点击了，响应谁的一个标记。看一下action，这里我给出结构
action:{ //小时加1(当前时间) incrementHours: function(e) {} //分钟加1(当前时间) incrementMinutes: function(e) {} //秒钟加1(当前时间) incrementSeconds: function(e) {} //小时减1(当前时间) decrementHours: function(e) {} //分钟减1(当前时间) decrementMinutes: function(e){} //秒钟减1(当前时间) decrementSeconds: function(e){} togglePeriod: function(e) {} //将所有从小时,分钟，秒钟的子菜单跳转到小时面板 showPicker: function() {} //显示关于小时的子菜单(面板) showHours: function() {} //显示关于分钟的子菜单(面板) showMinutes: function() {} //显示关于秒针的子菜单(面板) showSeconds: function() {} //小时子菜单中获取用户选择的小时信息 selectHour: function(e) {} //分钟子菜单中获取用户选择的分钟信息 selectMinute: function(e) {} //秒钟子菜单中获取用户选择的秒钟信息 selectSecond: function(e) {} }
action中每一个属性名对应了data-action=后面的值，这样可以调用相应的方法，上面的分为show，select，增减三大类。增减总要是到时分秒进行增减，最后还是要通过fillTime显示出来。show之类的方法主要是跳转，因为小时面板中存在3个子菜单，如果我们在某个子菜单中选择了一个值，那就需要跳转到小时面板上，这里没有之前通过层级控制，而是简单的show和hide实现。其中showHours，showMinutes，showSeconds是跳转到相应的子菜单的，而showPicker方法是从任何子菜单跳回到小时面板。最后是select类的方法，主要是获取各个子菜单上的选择的信息。调用showPicker方法，返回小时面板。
3. stopEvent
//阻止冒泡和默认行为 stopEvent: function(e) { e.stopPropagation(); e.preventDefault(); }
。。很刚很生猛的方法。
4. show
//显示 show: function(e) { this.widget.show();//整个插件显示 this.height = this.component ? this.component.outerHeight() : this.$element.outerHeight(); this.place(); this.$element.trigger({ type: 'show', date: this._date }); this._attachDatePickerGlobalEvents(); if (e) { e.stopPropagation(); e.preventDefault(); } }
首先这个show方法，先将整个插件显示出来。这个有一个place方法和_attachDatePickerGlobalEvents方法
这里的place方法，主要是控制控件的显示位置，_attachDatePickerGlobalEvents则主要是绑定hide方法和resize事件
//在show方法绑定的事件 _attachDatePickerGlobalEvents: function() { $(window).on( 'resize.datetimepicker' + this.id, $.proxy(this.place, this)); if (!this.isInput) { $(document).on( 'mousedown.datetimepicker' + this.id, $.proxy(this.hide, this));//将关闭事件绑定到了文档中 } }
这里可以看到，我们只有点击网页空白处，才能完成关闭插件的效果。这里刚才我们提到的第二个bug了。既然说到了show方法，就提一下hide方法
hide: function() { // Ignore event if in the middle of a picker transition var collapse = this.widget.find('.collapse') for (var i = 0; i < collapse.length; i++) { var collapseData = collapse.eq(i).data('collapse'); if (collapseData && collapseData.transitioning) return; } this.widget.hide();//隐藏掉整个控件 this.viewMode = this.startViewMode;//层级归零 this.showMode();//下次点击进入时，应该是零级面板 this.set(); this.$element.trigger({ type: 'hide', date: this._date }); this._detachDatePickerGlobalEvents();//删除datetimepicker下的mousedown绑定事件 }
基本都是擦屁股的事情，看一下_detachDatePickerGlobalEvents
_detachDatePickerGlobalEvents: function () { $(window).off('resize.datetimepicker' + this.id); if (!this.isInput) { $(document).off('mousedown.datetimepicker' + this.id); } }
5. change
这个方法主要是为了防止用户手动自定义修改input框中的内容，其中这个插件如此多此一举的行为，给了不好的用户体验，导致我直接在input中写入任意信息，鼠标点击空白处时，input框中自动转成当前日期，算是一个bug吧。建议整个input框不可以自定义填写。
//控制用户自定义修改input内容 change: function(e) { var input = $(e.target); var val = input.val(); if (this._formatPattern.test(val)) {//满足一个之前定义好的标准的时间格式 this.update(); this.setValue(this._date.getTime()); this.notifyChange(); this.set(); } else if (val && val.trim()) {//不满足时，用户修改了input中信息时，将修改为系统当前时间，个人觉得这个功能不好，这个input应该是不可自定义填写的 this.setValue(this._date.getTime()); if (this._date) this.set();//显示在input中 else input.val(''); } else { if (this._date) { this.setValue(null); // unset the date when the input is // erased this.notifyChange(); this._unset = true; } } this._resetMaskPos(input); }
这里有个setValue方法
//如果input框中被修改了，如果不满足时间格式，将默认修改为系统时间 setValue: function(newDate) { if (!newDate) { this._unset = true; } else { this._unset = false; } if (typeof newDate === 'string') {//如果是字符串类型的使用parseDate转 this._date = this.parseDate(newDate); } else if(newDate) { this._date = new Date(newDate);//否则使用Date转 } this.set(); this.viewDate = UTCDate(this._date.getUTCFullYear(), this._date.getUTCMonth(), 1, 0, 0, 0, 0); this.fillDate(); this.fillTime(); }
通过正则判断，发现input框中的信息不符合时间格式，那插件强行修改为当前日期，setValue方法的主要功能主要是更新时间。
6. keydown
7. keypress这里暂时不讨论
至此整个插件算是勉强看完，下面留下了一些这个插件的bug，我们来总结一下：
1.时分秒子菜单存在点击出现Nan的bug
2.插件没有为0级菜单绑定关闭插件的方法，导致用户需要点击网页空白处才能完成。
3.change事件监听较为繁琐，可以直接输入任何字符显示系统日期，建议去除。
修改bootstrap-datetimepicker.js
以下的修改是本人的一点想法，读者如果有更好的想法可以分享一下，我这里就抛砖引玉了，另外这个插件如果还有别的bug，也希望能够提出来，大家一起解决。
对于第一个bug，我们知道是因为data-action属性放置的地方不对，不应该放置在div上，而是放置在div内的table上。所以我们只需要修改时分秒子菜单的模版即可
TPGlobal.getTemplate = function(is12Hours, showSeconds) { ...... '</tr>' + '</table>' + '</div>' + '<div class="timepicker-hours" data-action="selectHour">' + '<table class="table-condensed">' + '</table>'+ '</div>'+ '<div class="timepicker-minutes" data-action="selectMinute">' + '<table class="table-condensed">' + '</table>'+ '</div>'+ (showSeconds ? '<div class="timepicker-seconds" data-action="selectSecond">' + '<table class="table-condensed">' + '</table>'+ '</div>': '') } 修改为 '</tr>' + '</table>' + '</div>' + '<div class="timepicker-hours">' + '<table class="table-condensed" data-action="selectHour">' + '</table>'+ '</div>'+ '<div class="timepicker-minutes">' + '<table class="table-condensed" data-action="selectMinute">' + '</table>'+ '</div>'+ (showSeconds ? '<div class="timepicker-seconds">' + '<table class="table-condensed" data-action="selectSecond">' + '</table>'+ '</div>': '') );
对于第二个bug，对于点击0级菜单不能关闭插件，我们找到day部分绑定了click触发事件，我们只要在click方法最后加上一个原型上的hide方法，就可以帮插件关闭。看一下：
click: function(e) { .... case 'td'://点击日期 if (target.is('.day')) { .... this.viewDate = UTCDate( year, month, Math.min(28, day) , 0, 0, 0, 0); this.fillDate(); this.set(); this.notifyChange(); this.hide();//这里加上hide方法 } break; }
最后一个bug，这个我们可以直接在input上修改，将其改为只读就行
<input type="text" disabled="disabled"/>
ok，几个比较明显的bug改完，这个插件依旧还有一点东西需要我们再看一下。
使用时间插件，会有一种情况就是，需要控制用户输入的日期，比如不让用户选择超过当今日期的，不得小于2012年10月1日的，前面的日期必须大于后面的日期等等，解决方法有很多，可以直接由插件控制，也可以在input框触发事件，脱离时间控件控制。bootstrap-datetimepicker.js提供了内部控制。我们只需要做的，仅仅在初始化时传入的参数中多一个startDate或者是endDate即可。这里插件还有一个不足之处，就是这传入的开始时间和结束时间需要格式化，js时间的格式话比较麻烦，插件本身拥有这个格式化的方法，但是没有公共出来，你可以自己写一个格式化方法，也可以将插件内的格式化方法公共出来。源码之后添加如下代码：
window.UTCDate = UTCDate;
看一下例子：
//UTCDate(year, month, date, hours, minutes, seconds, milliseconds) var date1 = new Date(); var date = UTCDate(2013,9,10); $('#datetimepicker').datetimepicker({ format: 'MM/dd/yyyy hh:mm', language: 'en', pickDate: true, pickTime: true, hourStep: 1, minuteStep: 15, secondStep: 30, inputMask: true, startDate: date });
插件内部提供了UTCDate方法来格式化时间，如例子所写的插件必须选择大于2013年10月9日的，注意月份会加1。endDate的道理和startDate是一致的。
以上是本人的一点读码分析，不足之处还请指正。不胜感谢。
