简介

cxCalendar 是基于 jQuery 的日期选择器插件。
它灵活自由,你可以自定义外观,日期的范围,返回的格式等。

版本:

  • jQuery v1.7+
  • jQuery cxCalendar v1.5.3

下载地址及演示

在线演示地址:http://www.jqhtml.com//wp-content/uploads/2017/05/wz/jQuery.cxCalendar-1.5.3/

下载地址:点击下载

GitHub地址:https://github.com/ciaoca/cxCalendar/

使用方法

载入 CSS 文件


<link rel="stylesheet" href="jquery.cxcalendar.css">

载入 JavaScript 文件


<script src="jquery.js"></script>
<script src="jquery.cxcalendar.js"></script>

DOM 结构


<input id="element_id" type="text">

调用 cxCalendar


$('#element_id').cxCalendar();

设置全局默认值


// 需在引入 <script src="jquery.cxcalendar.js"></script> 之后,调用之前设置
$.cxCalendar.defaults.startDate = 1980;
$.cxCalendar.defaults.language = {
monthList: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekList: ['Sun', 'Mon', 'Tur', 'Wed', 'Thu', 'Fri', 'Sat']
};

参数说明

名称 默认值 说明
startDate 1950

起始日期

若指定年份,设置值为 4 位数的数字

若指定某一天,设置值为字符串或时间戳,该值能被new Date(value)处理

endDate 2030

结束日期

若指定年份,设置值为 4 位数的数字

若指定某一天,设置值为字符串或时间戳,该值能被new Date(value)处理

date undefined

默认日期

默认获取当前日期,自定义可使用字符串或时间戳,该值能被new Date(value)处理

※ input 中的 value 值优先级要高级此值

type 'date'

日期类型(v1.5 新增)

'date': 只选择日期

'datetime': 选择日期和时间

format 'YYYY-MM-DD'

日期值格式(自 v1.5 开始,之前版本的 type 更名为 format)

'YYYY': 年份,完整 4 位数字

'YY': 年份,仅末尾 2 位数字

'MM': 月份,数字带前导零(01-12)

'M': 月份(1-12)

'DD': 月份中的第几天,数字带前导零(01-31)

'D': 月份中的第几天(1-31)

'HH': 小时,24 小时格式,数字带前导零(00-23)

'H': 小时,24 小时格式(0-23)

'hh': 小时,12 小时格式,数字带前导零(01-12)

'h': 小时,12 小时格式(1-12)

'mm': 分钟,数字带前导零(00-59)

'm': 分钟(0-59)

'ss': 分钟,数字带前导零(00-59)

's': 分钟(0-59)

'TIME': 时间戳

'STRING': 日期的字符串,例:Wed Jul 28 1993

wday 0 星期开始于周几,可设置为:0-6 之间的数字

0: 星期日

1: 星期一

2: 星期二

3: 星期三

4: 星期四

5: 星期五

6: 星期六

position undefined 面板显示的位置详见:[Demo Position]
baseClass undefined 给面板容器增加 class,不会覆盖默认的 class
language undefined

自定义语言,值类型可是是字符串或对象

若为字符串,为语言配置文件中的属性名称(需要载入jquery.cxcalendar.languages.js

若为对象,则按照对象所设置的语言

data 属性参数

名称 说明
data-start-date 起始日期
data-end-date 结束日期
data-type 日期类型
data-format 日期值格式
data-position 面板显示的位置
data-wday 星期开始于周几
data-language 自定义语言

<input id="element_id" type="text" value="1988-1-31" data-start-date="2000" data-end-date="2015" data-format="YYYY/M/D" data-language="en">

data 属性设置的参数优先级要高于调用时参数设置的值

多语言配置说明

只需载入jquery.cxcalendar.languages.js,即可根据用户的语言环境,自动显示对应的语言。

名称 默认值 说明
monthList ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 月份的名称。
weekList ['日', '一', '二', '三', '四', '五', '六'] 星期的名称。从星期日开始排序。
holiday [] 节假日配置。

API 接口


var Api;
$('#element_id').cxCalendar(function(api){
Api = api;
});
// 或者作为第二个参数传入
$('#element_id').cxCalendar({
type: 'YYYY/M/D'
}, function(api){
Api = api;
});
名称 说明
show() 显示面板
hide() 隐藏面板
getDate(style) 获取当前选择的日期(style 格式与参数 format 相同)
setDate(value) 传入一个字符串来设置日期
setDate(year, month, day) 分别传入年、月、日来设置日期
gotoDate(value) 传入一个字符串来调整日期(只是显示面板变化,不会进行设置值)
gotoDate(year, month) 分别传入年、月来调整日期(只是显示面板变化,不会进行设置值)
clearDate() 清除日期值
setOptions(opt) 重新设置参数

jQuery cxCalendar 日期选择器的更多相关文章

  1. jQuery UI 日期选择器(Datepicker)

    设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...

  2. jquery写日期选择器

    跟上我的脚步,让我们来领略代码的世界! 使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口: (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年 ...

  3. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  4. (网页)jQuery UI 实例 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  5. jquery.datepair日期时分秒选择器

    jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历.Datepair将保持开始和结束日期/时间同步,并可以根据用户的操作设置默认值.该插件不提供任 ...

  6. 日期选择器:jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  7. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  8. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  9. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

随机推荐

  1. Java怎样获取Content-Type的文件类型Mime Type

    在Http请求中.有时须要知道Content-Type类型,尤其是上传文件时.更为重要.尽管有些办法可以解决,但都不太准确或者繁琐,索性我发现一个开源的类库可以解决相对完美的解决问题,它就是jMime ...

  2. LA 4329(树状数组)

    算法竞赛入门经典 p197 题目大意: 一条大街上住着n个乒乓球爱好者.常常比赛切磋技术.每一个人都有一个不同的技能值a[i].每场比赛须要3个人:两名选手,一名裁判.他们有个奇怪的约定,裁判必须住在 ...

  3. 读书笔记-HBase in Action-第一部分 HBase fundamentals

    新项目准备上HBase.HBase眼下由组里某牛负责.本着学会使用HBase的目标,先阅读下HBase in Action,一共十章组织成三部分,须要学习的内容包含HBase基本实现原理,用法,Sch ...

  4. linux下查看监听port相应的进程

    使用netstat查看进程PID [root@test ~]# netstat -anp|grep 5001 tcp 0 0 :::5001 :::* LISTEN 12886/java 之后各位看官 ...

  5. HTML如何让IMG自动适应DIV容器大小

    版权声明:本文为博主原创文章,未经博主允许不得转载.作者:沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946HTML如何让I ...

  6. luogu1991 无线通讯网

    题目大意 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话.任意两个配备了一条卫星电话线路的哨所(两边都ᤕ有 ...

  7. C++虚函数默认实参的注意事项

    我们都知道当成员函数是虚函数的时候,函数调用取决于调用函数的对象的类型而不是指针或者应用的类型.这就是C++中的多态. 那么一个虚函数的实参的缺省值是什么呢?例如如下代码: #include < ...

  8. arm下用shell控制gpio

    创建脚本gpio.sh #!/bin/sh PIN=$ VALUE=$ if test -d /sys/class/gpio/gpio$PIN/ then echo $VALUE > /sys/ ...

  9. App/Activity/Screen Orientation

    测试android屏幕方向的小Demo 1.首先我们在values下面新建文件arrays.xml(用来在下拉列表中显示) <?xml version="1.0" encod ...

  10. ASP.NET通用权限系统快速开发框架

    系统在线演示地址: http://120.90.2.126:8051 登录账户:system,密码:system### DEMO下载地址: http://download.csdn.net/detai ...