`

强大的独立日期选择器(date picker)插件 - Kalendae

    博客分类:
  • JS
阅读更多

日期:2012-4-16  来源:GBin1.com

强大的独立日期选择器(date picker)插件 - Kalendae

在线演示   本地下载

今天分享一个独立的日期选择插件KalendaeKalendae 是 一个强大健壮的独立日期选择器。如果你不想使用重量的jQuery UI类库的话,这个插件肯定是一个不错的备选。Kalendae包含了丰富的插件选项,配置,属性,事件和函数。给予你丰富和灵活的方式来创建日期选择 器。当然它内含了一个强大的日期处理javascript插件 - moment.js , 这个类库我们也曾经介绍过(不容错过的超棒Javascript日期处理类库-Moment.js ),能够灵活的处理和格式化日期。

主要特性

  • 完全支持各平台移植,没有任何类库依赖,不要求jQuery, prototype,或者Mootools。只需要添加脚本和样式
  • 支持主题和皮肤。缺省的主题只使用一个图片文件,其它配置使用CSS
  • 支持单天,多天或者日期区域选择
  • 可配置月份选择
  • 可作为一个行内的插件在页面中使用,或者绑定输入框来调用
  • 可绑定到页面中任何元素,不仅仅是已命名元素
  • 支持多种类型配置例如,隔日选择/工作日选择 ,未来/过去,可定义为数组或者通过callback配置
  • 日期输出类型可支持不同的格式,利用moment.js来高效处理和解析日期

如何使用

导入对应的javascript和CSS:

<link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8">
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script> 

针对不同的使用环境设置,如下:

单日期选择

new Kalendae(document.body, {
    months:1,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:2,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:3,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

日期范围选择

...

来源:强大的独立日期选择器(date picker)插件 - Kalendae

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics