DCalendar增加月份选择功能--简单jQuery日期选择器插件改动

做时间插件的时候,很多都会遇到要做选择月份的插件,但是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'
            });

就这样,我们简单完成一个插件改造功能。

 

posted @ 2017-05-09 17:27  洛河  阅读(3459)  评论(0编辑  收藏  举报