jQuery cxCalendar 日期选择器

Posted 2021-01-20 sfornt

简介

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 位数的数字 若指定某一天，设置值为字符串或时间戳，该值能被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	面板显示的位置详见：[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-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)	重新设置参数