摘要:本篇教程介绍了jQuery教程之jQuery cxCalendar日期选择器,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程之jQuery cxCalendar日期选择器,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
cxCalendar 是基于 jQuery 的日期选择器插件。
它灵活自由,你可以自定义外观,日期的范围,返回的格式等。
版本:
jQuery v1.7+
jQuery cxCalendar v1.5
github
使用方法
载入 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 面板显示的位置
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) 重新设置参数
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号