bootstrap-datetimepicker时间控件添加清除按钮

一 前言

使用datetimepicker控件时,本人的原则是简约但功能要齐全,本来觉得挺不错的,无奈需求变更...exm?需要添加一个清除的按钮,而不是input框旁边多一个叉...玛德...

翻来覆去,想到不失优雅的解决办法就是改源码咯...既然决定了就实施吧~无奈摊手

二 思路

看着控件上"今日",令我不由自主的想到.改呀改源码,有今日的地方,就有清除

思路确实简单,得好好捋捋咯

三 实现

找到了找到了,今日也就是todayBtn,发现了不止一处哦,艾玛看了以后,实现起来也就是傻瓜式改动嘛,下面附上步骤以及源码

1.

this.todayBtn = (options.todayBtn || this.element.data('date-today-btn') || false);  
this.clearBtn = (options.clearBtn || this.element.data('date-clear-btn') || false);// add by Geo  

2.

this.picker.find('tfoot th.today')  
                .text(dates[this.language].today)  
                .toggle(this.todayBtn !== false);  
this.picker.find('tfoot th.clear')  
                .text(dates[this.language].clear)  
                .toggle(this.clearBtn!==false); // add by Geo  

3.

case 'today':  
                                var date = new Date();  
                                date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);  
  
                                // Respect startDate and endDate.  
                                if(date < this.startDate) date = this.startDate;  
                                else if(date > this.endDate) date = this.endDate;  
  
                                this.viewMode = this.startViewMode;  
                                this.showMode(0);  
                                this._setDate(date);  
                                this.fill();  
                                if(this.autoclose) {  
                                    this.hide();  
                                }  
                                break;  
                            // add by Geo  
                            case 'clear':  
                                var date = new Date();  
                                date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);  
  
                                // Respect startDate and endDate.  
                                if (date < this.startDate) date = this.startDate;  
                                else if (date > this.endDate) date = this.endDate;  
  
                                this.viewMode = this.startViewMode;  
                                this.showMode(0);  
                                this._setDate(date);  
                                this.element.val("");  
                                //this._setDate(date);  
                                this.fill();  
                                if (this.autoclose) {  
                                    this.hide();  
                                }  
                                break;  

4.

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"],  
            meridiem: ["am", "pm"],  
            suffix: ["st", "nd", "rd", "th"],  
            today: "Today",  
            clear: 'Clear' // add by Geo  
        }  
    };  

5.

dates['zh-cn'] = {  
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],  
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],  
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],  
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        today: "今日",  
        clear:"清空", // add by Geo  
        suffix: [],  
        meridiem: []  
    };  

6.

dates['zh-tw'] = {  
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],  
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],  
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],  
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        today: "今天",  
        clear:"清空", // add by Geo  
        suffix: [],  
        meridiem: ["上午", "下午"]  
    };  

7.

footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr><tr><th colspan="7" class="clear"></th></tr></tfoot>'//add by Geo  

8.到了这里,差不多完成一大半,再添加样式~完美

/* add by Geo */  
.datetimepicker tfoot tr th.clear:hover {  
  background: #eeeeee;  
  cursor:pointer;  
}  

9.

$(".form-datetime").datetimepicker(  
    {  
        weekStart: 1,  
        todayBtn:  1,  
        autoclose: 1,  
        todayHighlight: 1,  
        startView: 2,  
        forceParse: 0,  
        showMeridian: 1,  
        minuteStep:5,  
        format: "yyyy-mm-dd hh:ii",  
        clearBtn:true //清除  
    });  

四 总结

更改源码时候的心情是复杂的,需求变更的时候心情更复杂,不知道要怎么neng,后来仔细捋捋的时候发现--照着葫芦画瓢就是有一点简单...咩哈哈哈哈哈,添加清除按钮大功告成,赶紧尝试下效果吧