笔记本电脑或是台式机

互联网

谷歌浏览器等

cxCalendar

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

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

（1）载入 CSS 文件（2）载入 JavaScript 文件 （3）DOM 结构（4）调用 cxCalendar$('#element_id').cxCalendar();

设置全局默认值// 需在引入 之后，调用之前设置  $.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'] };

cxcalendar参数说明，如下图所示。

data 属性参数，※ data 属性设置的参数优先级要高于调用时参数设置的值如下图所示

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

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

基础示例，如下图所示。

日期范围，如下图所示。

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

多语言和节假日，如下图所示。

API 接口，如下图所示。

该插件依赖于JQuery，需要引入

只需载入jquery.cxcalendar.languages.js，即可根据用户的语言环境，自动显示对应的语言。