bootstrap-datepicker插件的用法
在这里我用到的是bootstrap-datepicker.js,下载地址 http://www.eyecon.ro/bootstrap-datepicker;
相信很多人都用过datepicker,但是有时候我们的产品总是会有各种要求,让你不得不去改变他的一些
样式和用法,下面有一些我做过的需求,分享给大家。
1:英文版的月份我们业务人员看不懂,你给改个中文版本的吧。
答:我当时听到这句话内心是崩溃的,难道我们的业务是小学生吗!!?what zhe f******,算了,赚钱要紧,改吧。
于是我找到了源码的第1166行-1175行,将原来的代码换成:
var dates = $.fn.datepicker.dates = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "Today",
clear: "Clear"
}
};
于是就换成了中文版的了,哈哈哈,我真是人才。于是我们的产品又提出了新需求:
2:大哥(你以为产品会喊程序员大哥?yy一下不行吗~~),我们对账的东西,一开始只看月份,麻烦你能不能直接是
看月份,而不是只看日期?
对于这种合理的要求,我当然是义不容辞的更改。那么大家都知道,插件默认的是选择日期,怎么变为选择月份呢?
废话不多说,上代码:
$('#id').datepicker({
format: 'yyyy-mm',
minViewMode: 1,
startView: 1
});
在这里,只要给对应的input加个id,在js里写上这句代码就可以了。为什么可以了呢?因为这个minViewMode的作用,
minViewMode是1是选择月份,是0的话是日期,所以闭着眼猜也知道2是选择年份。当然还有很多默认的参数可以设置,
1139行到1158行:var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
听古人说,这里很多都可以设置,大家有兴趣可以自己试试。
这里给id去设置有个好处,就是不同的这个设置只影响当前的input,对于其他的input不影响,你要是都想选月份,
那么就把上面默认的minViewMode改为1就行了。
然而你以为这就完事了?no,no,no!新问题出来了,选好月份之后,为什么弹出的选框不消失呢???????
当测试人员发现的时候,我说你点一下其他地方就消失了,并且软磨硬泡,死皮赖脸的请求测试人员能放过我,
测试人员很给面子,反正不是什么大事,就过去了(呸!起床了,别做梦了),我是那种默默祈祷测试人员不会发现我的
bug而提心吊胆的人吗?我是这种不负责任的人吗?很显然就是(cry。。。。。)。
那么为了社会主义的建设(工资)怎么改呢?我看了半天源码,发现原来是写插件的那哥们没写好,在这里我请求投诉他。
源码782行-793行,:case 'span':
if (!target.is('.disabled')) {
this.viewDate.setUTCDate(1);
if (target.is('.month')) {
var day = 1;
var month = target.parent().find('span').index(target);
var year = this.viewDate.getUTCFullYear();
this.viewDate.setUTCMonth(month);
this._trigger('changeMonth', this.viewDate);
if (this.o.minViewMode === 1) {
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
这一段是写点击月份的时候发生的事,不信的可以f12看一看月份是不是span,还有就是看代码里minViewMode===1可以
证明(我为什么怕你们不信呢?不知道,习惯吧~~~~~),大家看到那个判断等于1的了吧,是不是少了点什么?就是隐藏
选框,那么怎么隐藏呢?我们记得点击日期的时候会隐藏弹框,我们把那么复制过来不就行了吗?哈哈哈,简直完美,于是
我立马就去复制过来: this.hide(),放到 this._setDate(UTCDate(year, month, day,0,0,0,0));后面就行了,就这么简单,轻
松搞定。
3:我想限制一下起始日期和结束日期,起始日期不能小于结束日期。。。
这也许是我们产品提出的较为简单的问题了,好吧,分享一下写法:
<input type="text" ng-model="queryParam.startDate" class="form-control datepicker" data-format="yyyy-mm-dd" name="startDate" data-enddate="queryParam.endDate" />
<input type="text" ng-model="queryParam.endDate" class="form-control datepicker" data-format="yyyy-mm-dd" name="endDate" data-startdate="queryParam.startDate" />
在这里我用的是angular,其实用啥都一样,主要是data-enddate写结束日期,data-startdate写开始日期,就完事了。
好啦,就分享到这里,希望能帮助到大家。