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

本文转自:https://blog.csdn.net/gyysmile/article/details/80226993

其实这位大神写的很好了，为什么我还要在写呢，因为我想写点东西了

最近测试部提出了一个需求，说什么datetimepicker选中的时间没有办法清除，我心想你直接删除不就好了，也想破口大骂，但是讲礼貌是我一贯的作风。

那么我们要实现什么要的需求:

             

添加一个清除的按钮，点击清楚的时候输入框中的内容去掉

这个怎么修改:看网上的说添加一个clearBtn属性就行了，我真的想问问，哥们你真的看效果了吗，添加clearBtn:true是必须的

还需要我们做的事情是修改源代码:

如何修改源代码:首先我们修改比较简单的:我们在HTML文件里面可以看到使用这个时间控件需要引入一个css，两个js，css我们就不管了，我们来看看js:

	<script src="js/lib/datepicker/bootstrap-datetimepicker.min.js"></script>
	<script src="js/lib/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>

我们所谓的修改源代码就是修改上面的两个js

在修改源代码之前我们看看怎么修改，当我们在初始化这个控件的时候当有todayBtn:true的时候会显示出来一个今天的按钮，我们就按照这个今天的按钮比葫芦画瓢来添加清除按钮:

首先是min.js：

第一步:

this.todayBtn=(j.todayBtn||this.element.data("date-today-btn")||false);
this.clearBtn = (j.clearBtn || this.element.data('date-clear-btn') || false);//添加部分

第二步:

this.picker.find("tfoot th.today").text(f[this.language].today).toggle(this.todayBtn!==false);
this.picker.find('tfoot th.clear').text(f[this.language].clear).toggle(this.clearBtn!==false);//添加部分

第三步:

case"today":
 var j=new Date();
j=h(j.getFullYear(),j.getMonth(),j.getDate(),j.getHours(),j.getMinutes(),j.getSeconds(),0);
if(j<this.startDate){
      j=this.startDate
}
else
{  if(j>this.endDate)
{
         j=this.endDate
 }
}
this.viewMode=this.startViewMode;this.showMode(0);this._setDate(j);this.fill();
if(this.autoclose)
{
     this.hide()
}
break;
 case 'clear':  //添加部分
    var date = new Date();  
    date = h(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;

第四步:

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' // 添加部分 
        }  
    };  

第五部分:

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

第六部分：修改：bootstrap-datetimepicker.zh-CN.js

;(function($){
	$.fn.datetimepicker.dates['zh-CN'] = {
			days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
			daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
			daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
			months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			today: "今天",
			clear:"清空",
			suffix: [],
			meridiem: ["上午", "下午"]
	};
}(jQuery));

上面基本上就修改完成了，初始化的时候添加上clearBtn按钮:

	// 日期选择
	$(".inp-date").datetimepicker({
		minView : 'month',
		startView:2,
		format : "yyyy-mm-dd",
		language : "zh-CN",
		autoclose : true,
		escape : false,
		clearBtn: true
	});

到这个地方基本上就修改完成了，可以实现上面我的效果

希望对你有所帮助   如果存在问题可以扫下面的二维码添加我微信：欢迎一起交流学习