本文实例讲述了jQuery实现的简单日历组件定义与用法。分享给大家供大家参考,具体如下:
说到日历组件,网上一搜一大堆,各种插件啊,集成框架啊实在不少。但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI,引导等。其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了。
好了,废话不多说,直接上代码:
好了,先引入jQuery库。(发表一下感概:angularJS的数据双向绑定着实让我对jQuery的未来担忧了一阵子,不过jQuery毕竟存在的时间很久,API文档和应用方面实在太广泛了* _ *,而且jQuery无可厚非是一款相当不错的DOM操作类库,至少我觉得段时间内这个地位无可动摇。所以大家还是大胆地用吧!)
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jQuery.min.js "祝辞& lt;/script>
之前
下面这个是还没压缩的js文件,纯手写哦^ _ ^
/*
* jquery扩展:dateField
*作者:jafeney
* createTime: 2015-8-28(很久之前写的,拿出来炒下冷饭)
*/jQuery.fn.extend ({
dateField:功能(选项,回调){
var自我=,
_self=$ (),
_eventType=选项。eventType | |“点击”,
_style=选项。风格| |“违约”,
_parent=$(这).parent (),
_nowDate={
年:新日期().getFullYear (),
月:新日期().getMonth () + 1
},
_switchState=0,
_monthArray=['一月”、“二月”,“三月”、“四月”,“五月”、“六月”,“七月”、“八月”、“九月”,“十月”,“十一月”,“十二月”),
_daysArray=[31日31日31日,28日,30日,30日,31日,31日,30日,31日,30日,31);/*初始化*/_self.on (_eventType、功能(){/*之前使用这个扩展,“_self”必须有一个容器*/_self.parent () . css(“位置”,“相对”);/*创建元素作为dateField容器*/var _container=$ (“& lt; div类=' dateField-container祝辞& lt;/div>”);
var _header=$ (" & lt; div类=癲ateField-header”在“
+ " & lt; div类=癲ateField-header-btns”在“
+ " & lt;跨类=' btn dateField-header-btn-left祝辞« & lt;/span>”
+ " & lt;跨类=癰tn dateField-header-datePicker”在“+ _nowDate.year +“年”+ _nowDate.month +“月& lt;/span>”
+ " & lt;跨类=' btn dateField-header-btn-right祝辞» & lt;/span>”
+ " & lt;/div>”
+ " & lt; ul类=' dateField-header-week '祝辞& lt; li>日& lt;/li> & lt; li>一& lt;/li> & lt; li>二& lt;/li> & lt; li>三& lt;/li> & lt; li>四& lt;/li> & lt; li>五& lt;/li> & lt; li>六& lt;/li> & lt;/ul>”
+ " & lt;/div>”);
var _body=$ (“& lt; div类=癲ateField-body”在“+ self.getDays (_nowDate.year _nowDate.month) +“& lt;/div>”);
var _footer=$ (“& lt; div类=' dateField-footer祝辞& lt;跨类=' btn dateField-footer-close祝辞关闭& lt;/span> & lt;/div>”);
_container.append (_header) .append (_body) .append (_footer);
_self.parent () .append (_container);
_self.parent (); (.dateField-container),告诉();
*//*做回调
如果(回调)的回调();
});
*//*一些功能/*得到任何年和月的天*/列表
self.getDays=函数(年、月){
var _monthDay=self.getMonthDays(年、月);
var _firstDay=new日期(年+‘/?月+“/?“01”).getDay ();//得到本月的第一天的工作日
var returnStr=";
returnStr +=" & lt; ul类=' dateField-body-days祝辞”;
(var i=1; i<=42;我+ +){
如果(i<=_monthDay + _firstDay) {
如果(我% 7===0){
returnStr +=崩? lt;类=' dateField-select select-day去年的祝辞”+ self.filterDay(我-_firstDay) +“& lt;/li>”;
其他}{
returnStr +=崩? lt;类=' dateField-select select-day”在“+ self.filterDay(我-_firstDay) +“& lt;/li>”;
}
其他}{
如果(我% 7===0){
returnStr +=崩? lt;类=' dateField-select select-day去年的祝辞& lt;/li>”;
其他}{
returnStr +=崩? lt;类=' dateField-select select-day的祝辞& lt;/li>”;
}
}
}
returnStr +=? lt;/ul>”;
返回returnStr;
}
*//*过滤天
self.filterDay=function () {
如果(day
