jQuery cxCalendar 日期选择器
简介
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 位数的数字 若指定某一天,设置值为字符串或时间戳,该值能被 |
endDate | 2030 |
结束日期 若指定年份,设置值为 4 位数的数字 若指定某一天,设置值为字符串或时间戳,该值能被 |
date | undefined |
默认日期 默认获取当前日期,自定义可使用字符串或时间戳,该值能被 ※ 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 |
自定义语言,值类型可是是字符串或对象 若为字符串,为语言配置文件中的属性名称(需要载入 若为对象,则按照对象所设置的语言 |
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 日期选择器的更多相关文章
- jQuery UI 日期选择器(Datepicker)
设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...
- jquery写日期选择器
跟上我的脚步,让我们来领略代码的世界! 使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口: (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年 ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- (网页)jQuery UI 实例 - 日期选择器(Datepicker)
默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...
- jquery.datepair日期时分秒选择器
jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历.Datepair将保持开始和结束日期/时间同步,并可以根据用户的操作设置默认值.该插件不提供任 ...
- 日期选择器:jquery datepicker的使用
helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery datepicker jquery ui 在jquery ui中,提供了一个非常实用 ...
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...
- 用Jquery做一个时间日期选择器
今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...
随机推荐
- Java怎样获取Content-Type的文件类型Mime Type
在Http请求中.有时须要知道Content-Type类型,尤其是上传文件时.更为重要.尽管有些办法可以解决,但都不太准确或者繁琐,索性我发现一个开源的类库可以解决相对完美的解决问题,它就是jMime ...
- LA 4329(树状数组)
算法竞赛入门经典 p197 题目大意: 一条大街上住着n个乒乓球爱好者.常常比赛切磋技术.每一个人都有一个不同的技能值a[i].每场比赛须要3个人:两名选手,一名裁判.他们有个奇怪的约定,裁判必须住在 ...
- 读书笔记-HBase in Action-第一部分 HBase fundamentals
新项目准备上HBase.HBase眼下由组里某牛负责.本着学会使用HBase的目标,先阅读下HBase in Action,一共十章组织成三部分,须要学习的内容包含HBase基本实现原理,用法,Sch ...
- linux下查看监听port相应的进程
使用netstat查看进程PID [root@test ~]# netstat -anp|grep 5001 tcp 0 0 :::5001 :::* LISTEN 12886/java 之后各位看官 ...
- HTML如何让IMG自动适应DIV容器大小
版权声明:本文为博主原创文章,未经博主允许不得转载.作者:沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946HTML如何让I ...
- luogu1991 无线通讯网
题目大意 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话.任意两个配备了一条卫星电话线路的哨所(两边都ᤕ有 ...
- C++虚函数默认实参的注意事项
我们都知道当成员函数是虚函数的时候,函数调用取决于调用函数的对象的类型而不是指针或者应用的类型.这就是C++中的多态. 那么一个虚函数的实参的缺省值是什么呢?例如如下代码: #include < ...
- arm下用shell控制gpio
创建脚本gpio.sh #!/bin/sh PIN=$ VALUE=$ if test -d /sys/class/gpio/gpio$PIN/ then echo $VALUE > /sys/ ...
- App/Activity/Screen Orientation
测试android屏幕方向的小Demo 1.首先我们在values下面新建文件arrays.xml(用来在下拉列表中显示) <?xml version="1.0" encod ...
- ASP.NET通用权限系统快速开发框架
系统在线演示地址: http://120.90.2.126:8051 登录账户:system,密码:system### DEMO下载地址: http://download.csdn.net/detai ...