Kalendae轻量级时间日期选择JavaScript插件

Kalendae是一个轻量级的时间日期选择JavaScript插件,这是一个独立的插件,不依赖任何第三方插件库,使用简单方便,完美支持日期的年月日选择。

特点

独立插件,不依赖第三方插件,比如jQuery、Prototype、Mootools等,只需要你引入插件文件即可使用。
默认主题使用一个图片文件,即上下按钮,所有的其它的效果均有CSS设计完成。
支持兼容现在大多数的浏览器,IE8以上。
支持单日期、多日期和日期范围选择。
一次性显示月份的可配置数。
可以在网页上显示为一个内联控件,或连接到一个或多个弹出一个控制输入字段。
可以连接到任何页面元素,不只是命名元素。
可配置的自定义参数,定义为一系列的日期或通过一个回调函数
输出选定日期以多种格式
利用Moment.js智能和简单的数据解析。
示例截图

默认的显示效果

一个输入元素的2个月日历。

两个月,范围选择,未来的日期,与周末灰色显示:

使用方法

复制build/文件夹里面的文件到任何网站脚本的地方。包括JS和CSS文件在文件头部像:

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

一旦这样做,你可以初始化kalendae的一些方法。最简单的方法就是简单地添加“auto-kal”类到你想日历附加到元素。将使用默认设置创建日历。

<div class="auto-kal"></div>

下面的代码为输入元素,提供一个弹出式日历。

<input type="text" class="auto-kal">
如果你想重写默认设置,你可以使用该属性的数据。

<div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>

同样,这也将为输入元素的工作。

你也可以手动设置kalendae通过JavaScript代码。这应该在页面的结尾,或在Domready/加载事件。要做到这一点你必须实例化一个对象Kalendae,或输入要素类Kalendae.Input弹出。两个对象都有两个参数:

这是一个targetelement元素对象,或元素的ID字符串。
选项-一个包含新选项的对象。任何选项都将返回到默认设置。
看到包括index.html文件使用的例子。

jQuery

kalendae不需要jQuery,但确实提供了一个jQuery插件,jQuery是可用的。jQuery的用户可以通过调用创建一个窗口或弹出$(selector).kalendae(options)。selector 如果选择是一个HTML输入元素Kalendae的一个实例。输入创建实例,否则将Kalendae。这个实例是通过jQuery的数据存储和访问方法可以通过$(selector).data('kalendae')。

Moment.js

缓解期的处理流程,Kalendae可以使用Moment.js数据处理库。这个捆绑的库已被修改,以防止它被添加到全局范围内,但如果你希望在自己的代码中使用它,它仍然是可用的。在“脚本”标记为您的应用程序可用的时候添加下面的。

<script type="text/javascript" charset="utf-8">
    window.moment = Kalendae.moment;
</script>

时间: 2024-10-25 16:50:38

Kalendae轻量级时间日期选择JavaScript插件的相关文章

Jquery日期选择datepicker插件用法实例分析

  本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期',

Jquery日期选择datepicker插件用法实例分析_jquery

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

Android中TimePicker与DatePicker时间日期选择组件的使用实例_Android

效果和代码都非常直观: 实例1:TimePicker <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_par

Android中TimePicker与DatePicker时间日期选择组件的使用实例

效果和代码都非常直观: 实例1:TimePicker <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_par

自己动手丰衣足食之移动端日期选择插件

下载地址:http://download.csdn.net/detail/cometwo/9436022 最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又长还收费,我就忍不住自己做了一个,也不过就10几kb的事情嘛,想想独乐乐不如众乐乐,如果伙伴们手上没有轻量级的日期选择插件不如先拿我这个应付一下吧! 项目截图: 项目地址:https://git

自己动手丰衣足食之移动端日期选择插件(强烈推荐)

移动端的日期选择插件相比PC端比较少,主要原因是不同手机浏览器的效果不一样,mobiscroll 太臃肿了,而且不是免费的,一个字:丑 在此向大家分享一款手机端的日期选择插件https://github.com/xfhxbb/lCalendar,特此向这位雷锋敬意,另一个是移动端 城市 选择插件http://blog.csdn.net/libin_1/article/details/50689075 或者看看http://blog.csdn.net/libin_1/article/details

基于vuejs+webpack的日期选择插件_javascript技巧

基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期 支持限定开始和结束日期范围选择. 支持小时分钟 需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo

原生javascript实现自动更新的时间日期_javascript技巧

能够动态变化的事物总比静态的更能够吸引人,甚至更有实用效果,比如能够自动变化的时间日期效果就是如此,下面就通过代码实例介绍一下如何实现此效果,代码实例如下:一.具体代码 <html> <head> <meta charset="gb2312"> <title></title> <script type="text/javascript"> var t = null; function time(

jquery日期时间My97DatePicker选择控件函数使用例子

1.推荐日期选择控件:My97DatePicker My97DatePicker是一个非常好用的日期/时间选择控件,支持多种日期时间类型等: 支持的浏览器 IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+ 注意:IE 8/9/10/11是完美支持的 功能如下: 常规功能 支持多种调用模式 下拉,输入,导航选择日期 支持周显示 只读开关,高亮周末功能 操作按钮自定义 自动选择显示位置 自定义弹出位置 自定义星期的第一天new 特色功