方案一转自: https://blog.csdn.net/rendeyishi/article/details/78125796
方案一:
1、首先引入js、css
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<link href="js/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
2、div代码
<div class="col-lg-3 col-md-6 col-xs-12" style="padding-left:70px">
<div class="form-group">
<label class="col-xs-4 control-label" style=" padding-right: 14px;"></label>
<div class="input-group date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input type="text" name="endDate" placeholder="" id="endDate"
class="form-control form_datetime" maxlength="255"
readonly="readonly" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</div>
3、js调用日期
<script type="text/javascript">
setTimeout(function(){
$("#endDate").datetimepicker({
format: 'yyyy-mm-dd hh:ii', //日期格式
language: 'zh-CN',
autoclose: true,
clearBtn: true,
todayHighlight: true,
minView: 0,
minuteStep:1,
endDate: new Date(),
}).on('show', function(event) {
event.preventDefault();
event.stopPropagation();
var endTime = $("#entryDate").val();
$("#entryDate1").datetimepicker('setStartDate',endTime);
});
},1000);
$(".glyphicon-remove").click(function(){
$($($(this).parent()).prev()).val("");
});
</script>
效果图:
虽然实现了这种效果的清空方式,但无奈需求那边觉得这样不好看。好吧,没办法了,只能继续改了,如果各位对这种方式也不满意的,那么请看方案二 ↓
方案二:
方案二转自: https://blog.csdn.net/datouniao1/article/details/81664106
1、引入js
../plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js
../plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js
2、在 bootstrap-datetimepicker.min.js源码里面添加一些东西
this.todayBtn=(j.todayBtn||this.element.data("date-today-btn")||false);
this.clearBtn = (j.clearBtn || this.element.data('date-clear-btn') || false);//添加部分
2.1、继续往下添加
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);//添加部分
2.2、继续添加
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;
2.3、继续
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' // 添加部分
}
};
2.4、继续
footTemplate:'<tfoot><tr><th colspan="7" class="today"></th></tr><tr><th colspan="7" class="clear"></th></tr></tfoot>'}
3、修改…/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js,如下
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
clear:"清空",
suffix: [],
meridiem: ["上午", "下午"]
};
}(jQuery));
4、最后初始化的时候添加 clearBtn按钮就可以了。
$("#entryDate").datetimepicker({
format: 'yyyy-mm-dd hh:ii', //日期格式
language: 'zh-CN',
autoclose: true,
clearBtn:true,
todayHighlight: true,
minView: 0,
minuteStep:1,
endDate: new Date(),
})
最终效果图如下:
OK,完事了,希望对大家有帮助!!