zoukankan      html  css  js  c++  java
  • 发布首款支持Shift/Ctrl多选的国产日历控件,界面仿Twitter风格,支持中文日期类型,支持SImpleDateFormat格式,支持change等自定义事件,全中文注释和API,欢迎支持

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

      

    新增双月日历,多月日历

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

    4月13日更新(感谢大家热心反馈)

    1.加入鼠标划动多选

    2.加入再次单击选中日期,会取消选择 

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

    本日历,支持多语言本地化,且中文支持非常好

    image

    独家支持日历日期多选操作,按住shift键,多选,和按住ctrl键多选,

    image      shift选择效果       image  ctrl选择效果

    支持开始日期和结束日期限制

    image

    支持自定义事件change,可以方便2次编程

    //默认日历
    var picker = new $kit.ui.DatePicker();
    picker.init();
    $kit.el('#J_datePicker').appendChild(picker.picker);
    picker.show();
    picker.ev({
          ev : 'change',
          fn : function(e) {
                  alert(picker.getValue());
          }
    })

    使用方法

    var picker = new $kit.ui.DatePicker({
    	dateFormat : 'yyyy年mm月dd日', //接受和输出的日期格式
    	language : 'cn',//本地化语言
    	show : false, //默认是否显示
    	canMultipleChoose : true, //能否多选
    	dateStringSeparator : ',', //多选时候输出分隔符
    	shiftSelectOutType : 'full', //多选时候输出类型,full为将选中的日期全部输出,short为输出选中日期的开头和结尾
    	shiftSelectOutTypeShortSeparator : '~'//当输出类型为short时,比如选中了3月1日到3月10日,则输出"3月1日~3月10日",简短输出,只有开头+分隔符+结尾
    });
    picker.init();//执行初始化
    更多参数请参考源码https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/DatePicker/datepicker.js
     

    API

    方法 说明
    show 显示
    hide 隐藏
    getValue 返回选中的日期
    init 初始化日历
    ev 注册事件
    自定义事件 说明
    change 在选中日期时触发
  • 相关阅读:
    UISegmentedControl分段控件
    手势识别器
    delegate代理设计模式
    target/action设计模式
    响应者链
    事件处理
    屏幕旋转
    混编ObjectiveC++
    AES128加密
    您不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/2444788.html
Copyright © 2011-2022 走看看