jQuery实现的简单日历组件定义与用法示例
本文实例讲述了jQuery实现的简单日历组件定义与用法。分享给大家供大家参考,具体如下:
站在用户的角度思考问题,与客户深入沟通,找到成县网站设计与成县网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、网站空间、企业邮箱。业务覆盖成县地区。
说到日历组件,网上一搜一大堆,各种插件啊、集成框架啊实在不少。但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了。
好了,废话不多说,直接上代码:
好了,先引入jQuery库。(发表一下感概:angularJS的数据双向绑定着实让我对jQuery的未来担忧了一阵子,不过jQuery毕竟存在的时间很久,API文档和应用方面实在太广泛了 * _ *,而且jQuery无可厚非是一款相当不错的DOM操作类库,至少我觉得段时间内这个地位无可动摇。所以大家还是大胆地用吧!)
下面这个是还没压缩的js文件,纯手写哦 ^_^
/* * jquery extend: dateField * author:jafeney * createTime:2015-8-28 (很久之前写的,拿出来炒下冷饭) */ jQuery.fn.extend({ dateField:function(options,callback){ var self=this, _self=$(this), _eventType=options.eventType || 'click', _style=options.style || 'default', _parent=$(this).parent(), _nowDate={ year:new Date().getFullYear(), month:new Date().getMonth()+1 }, _switchState=0, _monthArray=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], _daysArray=[31,28,31,30,31,30,31,31,30,31,30,31]; /*init*/ _self.on(_eventType,function(){ /*before use this extend,the '_self' must have a container*/ _self.parent().css('position','relative'); /*create element as dateField's container*/ var _container=$(""); var _header=$("" +""); var _body=$("" +"«" +""+_nowDate.year+"年"+_nowDate.month+"月" +"»" +"" +"" +"
- 日
- 一
- 二
- 三
- 四
- 五
- 六
"+self.getDays(_nowDate.year,_nowDate.month)+""); var _footer=$(" "); _container.append(_header).append(_body).append(_footer); _self.parent().append(_container); _self.parent().find('.dateField-container').show(); /*do callback*/ if(callback) callback(); }); /*some functions*/ /*get any year and any month's days into a list*/ self.getDays=function(year,month){ var _monthDay=self.getMonthDays(year,month); var _firstDay=new Date(year+'/'+month+'/'+'01').getDay(); //get this month's first day's weekday var returnStr=''; returnStr+="
- ";
for(var i=1;i<=42;i++){
if(i<=_monthDay+_firstDay){
if(i%7===0){
returnStr+="
- "+self.filterDay(i-_firstDay)+" "; }else{ returnStr+="
- "+self.filterDay(i-_firstDay)+" "; } }else{ if(i%7===0){ returnStr+=""; }else{ returnStr+=""; } } } returnStr+="
- ";
for(var i=0;i<12;i++){
if((i+1)%3===0){
returnStr+="
- "+self.switchMonth(i)+" "; }else{ returnStr+="
- "+self.switchMonth(i)+" "; } } returnStr+='
- ";
for(var i=0;i<12;i++){
if((i+1)%3===0){
returnStr+="
- "+(year+i)+" "; }else{ returnStr+="
- "+(year+i)+" "; } } returnStr+='
下面是我 写的简单的一套样式风格,有点模仿微信的风格。
/*dateField styles*/ /*reset*/ ul,li{ list-style: none; padding:0; margin:0; } /*default*/ .dateField-container{ position:absolute; width:210px; border:1px solid rgb(229,229,229); z-index:99999; background:#fff; font-size:13px; margin-top:0px; cursor: pointer; display:none; } .dateField-header{ width:212px; position:relative; left:-1px; } .dateField-header-btns{ width:100%; height:30px; text-align:center; background:rgb(243,95,143); } .btn{ user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; } .dateField-header-btn-left{ float: left; display:block; width:30px; height:30px; color:#fff; line-height:30px; } .dateField-header-btn-left:hover{ background:rgb(238,34,102); } .dateField-header-datePicker{ display:inline-block; width:120px; text-align:center; color:#fff; line-height:30px; } .dateField-header-datePicker:hover{ background:rgb(238,34,102); } .dateField-header-btn-right{ float: right; width:30px; height:30px; display:block; color:#fff; line-height:30px; } .dateField-header-btn-right:hover{ background:rgb(238,34,102); } .dateField-header-week{ clear:both; width:100%; height:26px; } .dateField-header-week li{ float: left; width:30px; height:30px; line-height:30px; text-align:center; } .dateField-body{ width:100%; } .dateField-body-days{ clear: both; } .dateField-body-days li{ float: left; width:30px; height:30px; box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; border-top:1px solid rgb(229,229,229); border-right:1px solid rgb(229,229,229); line-height:30px; text-align:center; } .dateField-body-days li:hover{ color:#fff; background:rgb(243,95,143); } .dateField-body-days li.active{ color:#fff; background:rgb(243,95,143); } .dateField-body-days li.last{ border-right:0; } .dateField-footer{ border-top:1px solid rgb(229,229,229); clear:both; width:100%; height:26px; font-size:12px; } .dateField-footer-close{ margin-top:2px; display:inline-block; width:100%; height:22px; background:rgb(245,245,245); text-align: center; line-height:22px; } .dateField-footer-close:hover{ background:rgb(238,238,238); } .dateField-select{ user-select:none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; } .dateField-body-months{ } .dateField-body-months li{ width:70px; height:35px; line-height:35px; } .dateField-body-years li{ width:70px; height: 35px; line-height: 35px; }
到了最关键的时刻,怎么使用呢?嘿嘿,就2行代码。
gitHub地址 https://github.com/Jafeney/dateField
感兴趣的朋友还可使用如下在线工具测试上述代码运行效果:
在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.jb51.net/code/WebCodeRun
在线HTML/CSS/JavaScript代码运行工具:
http://tools.jb51.net/code/HtmlJsRun
PS:这里再为大家推荐几款时间及日期相关工具供大家参考:
在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime
网页万年历日历:
http://tools.jb51.net/bianmin/webwannianli
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
文章题目:jQuery实现的简单日历组件定义与用法示例
链接分享:http://myzitong.com/article/pjidcc.html