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});

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

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

bootstrap-datetimepicker时间控件添加清除按钮相关推荐

datetimepicker 时间控件 1899年问题以及解决方法
datetimepicker 时间控件 1899年问题以及解决方法参考文章: (1)datetimepicker 时间控件 1899年问题以及解决方法 (2)https://www.cnblogs. ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
datetimepicker时间控件
喜欢上datetimepicker源自于对bootstrap的喜欢. 一款简单到爆的时间空间引入jq 引入bootstrap 引入datetimepicker和bootstrap-datetimep ...
bootstrap 时间控件
最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了需要引入 ...
Vue学习笔记：Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
MFC实战篇——图片旋转、控件PictureControl 清除显示、伪彩、直方图显示、为按钮添加背景图标、设置程序图标
文章目录一.图片旋转二.MFC 控件PictureControl 清除显示三.伪彩四.直方图五.为按钮添加背景图标六.设置图标七.改变组框外观一.图片旋转建立图片控件改变图片控件I ...
vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程
input的时间控件有三种类型属性 Android IOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime&q ...
angularjs 整合bootstrap 时间控件
一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...

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

bootstrap-datetimepicker时间控件添加清除按钮相关推荐

最新文章

热门文章