解决Bootstrap日期插件Date Range Picker清空的问题

来源:互联网 发布:学打五笔用什么软件 编辑:程序博客网 时间:2024/03/29 21:27

Date Range Picker日期插件清空

一般日期插件都有清空的功能,而Date Range Picker似乎并没有,因为使用的bootstrap框架,所以为了页面统一使用了date range picker,所以稍微做了一下改动:

本文使用的Date Range Picker版本为1.3.6,Bootstrap版本为3.3.7。 —— [ Date Range Picker地址 ]

代码块

在daterangepicker.js中找到取消按钮的点击方法,如下:

clickCancel: function (e) {            this.startDate = this.oldStartDate;            this.endDate = this.oldEndDate;            this.chosenLabel = this.oldChosenLabel;            this.updateView();            this.updateCalendars();            this.hide();            this.element.trigger('cancel.daterangepicker', this);        },

可以看到点击取消的时候只是隐藏了日期选择部分,我们可以添加一个清空的方法clearInputText()。

this.hide();
clickCancel: function (e) {    this.startDate = this.oldStartDate;    this.endDate = this.oldEndDate;    this.chosenLabel = this.oldChosenLabel;    this.updateView();    this.updateCalendars();    this.hide();    this.element.trigger('cancel.daterangepicker', this);    this.clearInputText();},

添加的方法如下:

 clearInputText: function() {     this.element.val(''); },

这里写图片描述
还有一步就是看你是否需要把取消改为清空了

this.locale = {                applyLabel: '确定',                cancelLabel: '清空',                fromLabel: '从',                toLabel: '到',                weekLabel: 'W',                customRangeLabel: 'Custom Range',                daysOfWeek: moment()._lang._weekdaysMin.slice(),                monthNames: moment()._lang._monthsShort.slice(),                firstDay: 0            };

这里写图片描述

阅读全文
0 0