bootstrap-datetimepicker时间控件添加清除按钮的几种方式

方案一转自： https://blog.youkuaiyun.com/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.youkuaiyun.com/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，完事了，希望对大家有帮助！！