发布首款支持Shift/Ctrl多选的国产日历控件,界面仿Twitter风格,支持中文日期类型,支持SImpleDateFormat格式,支持change等自定...

image

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在选中日期时触发
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值