I. Introduction
When using the datetimepicker control, my principle is to be simple but with complete functions. I thought it was pretty good, but I need to change it...exm? Need to add a clear button instead of an extra cross next to the input box...Made. ..
After going over and over again, I thought that the elegant solution is to change the source code... Now that you have decided, let's implement it~ Helplessly
Two ideas
Looking at "today" on the control 
The idea is really simple, it has to be carefully stroked
Three realizations
I found it. Today is todayBtn. I found more than one place. After Emma read it, it was a fool-like change. The steps and source code are attached below.
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 = {
on: {
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"],
pm ["am", "pm"]
suffix: ["st", "nd", "rd", "th"],
today: "Today",
clear: 'Clear' // add by Geo
}
};
5.
dates['zh-cn'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Tenth" month", "November", "December"],
monthsShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Tenth" month", "November", "December"],
today: "今日",
clear:"清空", // add by Geo
suffix: [],
pm [ ]
};
6.
dates['zh-tw'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Tenth" month", "November", "December"],
monthsShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Tenth" month", "November", "December"],
today: "today",
clear:"清空", // add by Geo
suffix: [],
meridiem: ["AM", "PM"]
};
7.
footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr><tr><th colspan="7" class="clear"></th></tr></tfoot>'//add by Geo
8. At this point, almost half of it is completed, and then add the style ~ perfect
/* 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 //Clear
});
Four Summary
When changing the source code, the mood is complicated. When the requirements change, the mood is more complicated. I don't know how to neng. Later, when I carefully stroked it, I found that it is a little simple to draw a scoop according to the gourd... Hahahahaha, add The clear button is done, let's try the effect