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


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

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

    界面如图

    image

    继承自之前发布的

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

    image

    初始化方法为

    //默认日历
                    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

  • 相关阅读:
    centos 添加 composer
    laravel5 缓存的使用
    git 的使用
    php 消息队列 rabbitmq 的安装使用
    vue插件大汇总
    vue 2.0 Gzip打包压缩
    Easy Mock 为啥那么打不开了?
    element ui 打印 表格
    解决 element 日期范围选择问题(只能选择相邻的 连两个月)
    vue router 的路由传参 params 和 query 的 区别
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/2446496.html
Copyright © 2020-2023  润新知