jQuery cxCalendar 日期选择器
Clone or download
ciaoca fix
选择面板位于浏览器最右边时错位
清楚日期时,未取消面板上的高亮日期
Latest commit 4cb1e78 Jun 4, 2018
Permalink
Failed to load latest commit information.
css style .cxcalendarbd padding Jul 31, 2017
js fix Jun 4, 2018
README.md update 1.5.4 Jul 12, 2017
bower.json update bower.json May 12, 2016
index.html fix Jun 4, 2018

README.md

jQuery cxCalendar

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

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

版本:

  • jQuery v1.7+
  • jQuery cxCalendar v1.5.4

文档:http://code.ciaoca.com/jquery/cxCalendar/

示例:http://code.ciaoca.com/jquery/cxCalendar/demo/

Preview

使用方法

载入 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="js/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: 星期六
onday [0,1,2,3,4,5,6] 可选择的日期
0: 星期日
1: 星期一
2: 星期二
3: 星期三
4: 星期四
5: 星期五
6: 星期六
unday undefined 不可选择的日期,一个数组,例:['1', '1-5', '2017-1-10']
'1': 每月 1 号
'1-5': 每年 1 月 5 日
'2017-1-10': 指定具体日期
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-onday 可选择日期,例:data-onday="1,2,3,4,5"
data-unday 不选择日期,例:data-unday="1,1-5,2017-1-10"
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 [] 节假日配置
// 节假日示例
holiday: [
  {day: 'M1-1', name: '元旦'},  // 以 M 开头,指定月日,每年固定重复的节日
  {day: 'D2018-2-16', name: '春节'}  // 以 D 开头,指定具体日期的节日
]

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) 重新设置参数