cxCalendar 是基于 jQuery 的日期选择器插件。
它灵活自由，你可以自定义外观，日期的范围，返回的格式等。
版本：
- jQuery v1.7+
- jQuery cxCalendar v1.5.4
文档：http://code.ciaoca.com/jquery/cxCalendar/
示例：http://code.ciaoca.com/jquery/cxCalendar/demo/
<link rel="stylesheet" href="jquery.cxcalendar.css"><script src="jquery.js"></script>
<script src="jquery.cxcalendar.js"></script><input id="element_id" type="text">$("#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-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 开头，指定具体日期的节日
]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) | 重新设置参数 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent