JQuery常用插件大全(3)cxCalendar 日期选择器

 时间:2024-11-03 15:54:47

1、 访问https://github.com/ciaoca/cxCalendar,下载cxCalendar ,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器

2、解压该下载文件,将其中的jquery.cxcalendar.css、jquery.cxcalendar.js(或jquery.cxcalendar.min.js)等文件拷贝进项目文件中,放在新建的css、js文件夹中。

3、(1)载入 CSS 文件<link rel="stylesheet" href="jquery.cxcalendar.css&鳎溻趄酃quot;>(2)载入 JavaScript 文件<script src="jquery.js"></script><script src="jquery.cxcalendar.js"></script>(3)DOM 结构<input id="element_id" type="text">(4)调用 cxCalendar$('#element_id').cxCalendar();

JQuery常用插件大全(3)cxCalendar 日期选择器

4、设置全局默认值// 需在引入 争犸禀淫<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']};

JQuery常用插件大全(3)cxCalendar 日期选择器

5、<!DOCTYPE HTML><html><head><m髫潋啜缅eta charset="utf-8"><title>cxCalendar 日期选择器</title><link rel="stylesheet" href="css/jquery.cxcalendar.css"><style>body{padding:20px;background:#ddd;font:14px/1.7 Arial,"\5b8b\4f53";}h1,h2,h3{font:bold 36px/1 "\5fae\8f6f\96c5\9ed1";}h2{font-size:20px;}h3{font-size:16px;}fieldset{margin:1em 0;}fieldset legend{font:bold 14px/2 "\5fae\8f6f\96c5\9ed1";}a{color:#06f;text-decoration:none;}a:hover{color:#00f;}.wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}</style></head><body><div class="wrap"> <h1>jQuery cxCalendar 日期选择器</h1> <h2>示例</h2> <fieldset> <legend>默认</legend> <label for="date_a">选择日期:</label> <input id="date_a" name="mydate" type="text" readonly> </fieldset> <fieldset> <legend>在 &lt;input&gt; 的 value 中设置默认值</legend> <label for="date_b">选择日期:</label> <input id="date_b" type="text" value="1988-1-31" readonly> </fieldset> <fieldset> <legend>在参数中设置默认日期</legend> <label for="date_c">选择日期:</label> <input id="date_c" type="text" value="" readonly> </fieldset> <h2>文档</h2> <ul> <li><a target="_blank" href="https://github.com/ciaoca/cxCalendar">Github</a></li> <li><a target="_blank" href="http://code.ciaoca.com/jquery/cxcalendar/">中文文档</a></li> </ul> <h2>作者</h2> <p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p> <p>Released under the MIT license</p></div><script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script><script src="js/jquery.cxcalendar.min.js"></script><script>// 默认$('#date_a').cxCalendar();// 在参数中设置默认日期$('#date_b').cxCalendar({ date: '1988/1/31'});// 在 value 中有默认值$('#date_c').cxCalendar();</script></body></html>

6、cxcalendar参数说明,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器

7、data 杨钭维程属性参数,<input id="element_id" type="text" value="稆糨孝汶;1988-1-31" data-start-date="2000" data-end-date="2015" data-type="YYYY/M/D" data-language="en">※ data 属性设置的参数优先级要高于调用时参数设置的值如下图所示

JQuery常用插件大全(3)cxCalendar 日期选择器

8、多语言配置说明只需载入jquery.cxcalendar.languages.js,即可根据用户的语言环境,自动显示对应的语言。

JQuery常用插件大全(3)cxCalendar 日期选择器

9、API 接口var Api;$('#element_id').cxCalendar(function(api){ Api = api;});// 或者作为第二个参数传入$('#element_id').cxCalendar({ type: 'YYYY/M/D'}, function(api){ Api = api;});

JQuery常用插件大全(3)cxCalendar 日期选择器

10、基础示例,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器

11、日期范围,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器

12、位置设定:根据参数的position属性或标签的data-position属性可以这是选择器饺咛百柘显示的位置。默认会根据所在位置,自动调整选择器的位置;若设为 "top" 或 "bottom" 时,会自动调整左右对齐的位置;若设为 "left" 或 "right" 时,会自动调整上下对齐的位置;若设为其他的值时,将不会自动调整任何位置,请预留好空间显示选择器。

JQuery常用插件大全(3)cxCalendar 日期选择器

13、多语言和节假日,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器

14、API 接口,如下图所示。

JQuery常用插件大全(3)cxCalendar 日期选择器
  • 日期选择器插件jQuery Date Range Picker攻略
  • jQuery UI日期选择器(Datepicker)
  • jQuery选择器总结
  • jQuery选择器的介绍
  • jQuery九大选择器
  • 热门搜索
    禁毒手抄报大全图片 小学生四年级手抄报 读书手抄报内容大全 勿忘国耻振兴中华手抄报 安全文明手抄报 关于爱的手抄报 美丽校园手抄报 扫黑除恶手抄报大全 安全手抄报内容资料 感恩父母手抄报图片