再次给力发布,首款全中文习惯,支持鼠标滑动多选的多月(可以显示N个月)的日历控件,界面仿Twitter风格,多语言支持,Ctrl/Shift多选支持,日期范围限制支持,自定义事件支持

号外:kitjs官方讨论QQ群建立了,QQ群号 88093625,欢迎大家加入,讨论前端相关话题 

 

 

地址:http://xueduany.github.com/KitJs/KitJs/index.html#datepicker_nmonth

 

界面如图

再次给力发布,首款全中文习惯,支持鼠标滑动多选的多月(可以显示N个月)的日历控件,界面仿Twitter风格,多语言支持,Ctrl/Shift多选支持,日期范围限制支持,自定义事件支持_第1张图片

 

继承自之前发布的

http://www.cnblogs.com/xueduanyang/archive/2012/04/12/2444788.html

再次给力发布,首款全中文习惯,支持鼠标滑动多选的多月(可以显示N个月)的日历控件,界面仿Twitter风格,多语言支持,Ctrl/Shift多选支持,日期范围限制支持,自定义事件支持_第2张图片

 

初始化方法为

//默认日历
                window.picker = new $kit.ui.DatePicker.NMonths();
                picker.init();
                $kit.el('#J_datePicker').appendChild(picker.picker);
                picker.show();
                picker.ev({
                    ev : 'change',
                    fn : function(e) {
                        alert(picker.getValue());
                    }
                })
                //输入框下拉
                $kit.ev({
                    el : '#J_input',
                    ev : 'focus',
                    fn : function(e) {
                        var d, ipt = e.target;
                        d = e.target[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
                        if(d) {
                            d.show();
                        } else {
                            d = new $kit.ui.DatePicker.NMonths();
                            d.init();
                            d.adhere($kit.el('#J_input'));
                            d.show();
                        }
                    }
                });
                $kit.ev({
                    el : document,
                    ev : 'click',
                    fn : function(e) {
                        var input = $kit.el('#J_input');
                        d = input[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
                        if(d && !$kit.contains(d.picker, e.target) && input != e.target) {
                            d.hide();
                        }
                    }
                });

 

与之前默认配置参数唯一的区别在于,多了一个配置显示多少个月的参数 nMonths,默认显示3个月,可以改成2个月

 

周末了,如果遇到啥问题,可以留言,下周继续更新,欢迎继续关注kitjshttp://xueduany.github.com/KitJs

你可能感兴趣的:(twitter)