简介

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

jQuery cxCalendar 日期选择器的更多相关文章

  1. jQuery UI 日期选择器(Datepicker)

    设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...

  2. jquery写日期选择器

    跟上我的脚步,让我们来领略代码的世界! 使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口: (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年 ...

  3. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  4. (网页)jQuery UI 实例 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  5. jquery.datepair日期时分秒选择器

    jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历.Datepair将保持开始和结束日期/时间同步,并可以根据用户的操作设置默认值.该插件不提供任 ...

  6. 日期选择器:jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  7. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  8. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  9. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

随机推荐

  1. Python帮助函数调试函数 用于获取对象的属性及属性值

    Python帮助函数调试函数 用于获取对象的属性及属性值 刚接触Python,上篇 <Python入门>第一个Python Web程序--简单的Web服务器 中调试非常不方便,不知道对象详 ...

  2. MVC + Redis

    net MVC + Redis(hash入库+log4net集成) https://www.cnblogs.com/hoyu/p/9063675.html 博客四元素 既然要写一个博客类的网站,那就应 ...

  3. 自己动手丰衣足食,为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  4. golang——(strings包)常用字符串操作函数

    (1)func HasPrefix(s, prefix string) bool 判断字符串s是否有前缀字符串prefix: (2)func HasSuffix(s, suffix string) b ...

  5. Redis(二)-Win系统下安装

    下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们下载 Red ...

  6. ROS-URDF-物理属性

    前言:介绍向连杆添加碰撞和惯性属性,以及向关节添加动力学. 参考自:http://wiki.ros.org/urdf/Tutorials/Adding%20Physical%20and%20Colli ...

  7. SnackDown Online Pre-elimination round A

    1. 应该n是偶数,就行吧.应该判断1个人,只能出现一次吧. #include<bits/stdc++.h> #define pb push_back typedef long long ...

  8. windows phone控件

    常用控件: 包括: Button控件.CheckBox控件.HyperlinkButton控件.Iamege控件.ListBox控件.PasswordBox控件.ProgressBar控件.Radio ...

  9. Last-Modified If-Modified-Since ETag If-None-Match

    Last-Modified.If-Modified-Since 有些数据随时都在变化. CNN.com 的主页经常几分钟就更新.另一方面,Google.com 的主页几个星期才更新一次 (当他们上传特 ...

  10. buf.readInt16LE函数详解

    offset {Number} 0 noAssert {Boolean} 默认:false 返回:{Number} 从该 Buffer 指定的带有特定尾数格式(readInt16BE() 返回一个较大 ...