你的位置:首页 > Java教程

[Java教程]jQuery cxCalendar 日期选择器


cxCalendar 是基于 jQuery 的日期选择器插件。

它灵活自由,你可以自定义外观,日期的范围,返回的格式等。

  • 版本:
  • jQuery v1.7+
  • jQuery cxCalendar v1.5

  • github


使用方法

载入 CSS 文件

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

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.cxcalendar.js"></script>
复制

DOM 结构

  1. <input id="element_id" type="text">
复制

调用 cxCalendar

  1. $('#element_id').cxCalendar();
复制

设置全局默认值

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

参数说明

名称默认值说明
startDate1950

起始日期

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

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

endDate2030

结束日期

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

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

dateundefined

默认日期

默认获取当前日期,自定义可使用字符串或时间戳,该值能被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

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

0: 星期日

1: 星期一

2: 星期二

3: 星期三

4: 星期四

5: 星期五

6: 星期六

positionundefined面板显示的位置
baseClassundefined给面板容器增加 class,不会覆盖默认的 class
languageundefined

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

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

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


data 属性参数

名称说明
data-start-date起始日期
data-end-date结束日期
data-type日期类型
data-format日期值格式
data-position面板显示的位置
data-wday星期开始于周几
data-language自定义语言
  1. <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 接口

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

在线实例

基础示例实例预览
选择日期和时间实例预览
日期范围实例预览
位置设定实例预览
多语言和节假日实例预览
API接口实例预览

 


下载