做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧
点击日期插件,出现上图,再点击月份就直接完成时间选择。
说一下,原来DCalendar是点击出现
所以首先增加一个option;
把原来的
this.viewMode = 'days';
改为
this.viewMode = options.viewMode?options.viewMode:'days';
这样,就完成了这个效果;
其次,时间插件还要求点击到几号才完成时间选择。
所以,我们修改为点击月份后就完成时间选择。
this.calendar.on('click', '.month', function(e){ var curr = new Date(that.date), y = that.calendar.find('#currM').text(); curr.setMonth($(e.currentTarget).attr('num')); that.date = curr; if(that.options.format=='yyyy-mm'){ that.create(that.viewMode); var cmonth = that.date.getMonth()+1, cyear = that.date.getFullYear(), selected = new Date(cyear, cmonth - 1, '1'); that.selected = cmonth + '/' + '1' + '/' + cyear; that.selectDate(); }else{ that.viewMode = 'days'; that.create(that.viewMode); } });
因为几号不重要所以我初始化为1号,而且为了不影响原有功能,我在format=='yyyy-mm'才给做直接选出时间的处理。
初始化方法:
$('#mydatepicker').dcalendarpicker({ format: 'yyyy-mm', viewMode : 'months' });
就这样,我们简单完成一个插件改造功能。