说到日历组件，网上一搜一大堆，各种插件啊、集成框架啊实在不少。但是插件有的不合需求，框架嘛依赖关系一大堆，比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件，功能也不需要很强大，只要能兼容所有浏览器，能选择任意年份日期和星期就可以了。
好了，废话不多说，直接上代码：
好了，先引入jQuery库。（发表一下感概：angularJS的数据双向绑定着实让我对jQuery的未来担忧了一阵子，不过jQuery毕竟存在的时间很久，API文档和应用方面实在太广泛了 * _ *，而且jQuery无可厚非是一款相当不错的DOM操作类库，至少我觉得段时间内这个地位无可动摇。所以大家还是大胆地用吧！）
<script type="text/javascript" src="https://www.jb51.net/article/js/jQuery.min.js"></script>
下面这个是还没压缩的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=$("<div></div>"); var _header=$("<div>" +"<div>" +"<span>«</span>" +"<span>"+_nowDate.year+"年"+_nowDate.month+"月</span>" +"<span>»</span>" +"</div>" +"<ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>" +"</div>"); var _body=$("<div>"+self.getDays(_nowDate.year,_nowDate.month)+"</div>"); var _footer=$("<div><span>关闭</span></div>"); _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+'https://www.jb51.net/'+month+'https://www.jb51.net/'+'01').getDay(); //get this month's first day's weekday var returnStr=''; returnStr+="<ul>"; for(var i=1;i<=42;i++){ if(i<=_monthDay+_firstDay){ if(i%7===0){ returnStr+="<li>"+self.filterDay(i-_firstDay)+"</li>"; }else{ returnStr+="<li>"+self.filterDay(i-_firstDay)+"</li>"; } }else{ if(i%7===0){ returnStr+="<li></li>"; }else{ returnStr+="<li></li>"; } } } returnStr+="</ul>"; return returnStr; } /*filter days*/ self.filterDay=function(day){ if(day<=0 || day>31) { return ''; }else{ return day; } } /*judge any year is LeapYear*/ self.isLeapYear=function(year){ var bolRet = false; if (0===year%4&&((year%100!==0)||(year%400===0))) { bolRet = true; } return bolRet; } /*get any year and any month's full days*/ self.getMonthDays=function(year,month){ var c=_daysArray[month-1]; if((month===2) && self.isLeapYear(year)) c++; return c; } /*get this year's months*/ self.getMonths=function(){ var returnStr=""; returnStr="<ul>"; for(var i=0;i<12;i++){ if((i+1)%3===0){ returnStr+="<li data-month='"+(i+1)+"'>"+self.switchMonth(i)+"</li>"; }else{ returnStr+="<li data-month='"+(i+1)+"'>"+self.switchMonth(i)+"</li>"; } } returnStr+='</ul>'; return returnStr; } /*get siblings 12 years*/ self.getYears=function(year){ var returnStr=""; returnStr="<ul>"; for(var i=0;i<12;i++){ if((i+1)%3===0){ returnStr+="<li data-year='"+(year+i)+"'>"+(year+i)+"</li>"; }else{ returnStr+="<li data-year='"+(year+i)+"'>"+(year+i)+"</li>"; } } returnStr+='</ul>'; return returnStr; } /*formatDate*/ self.formatDate=function(date){ if(date.length===1 || date<10){ return '0'+date; }else{ return date; } } /*switch month number to chinese*/ self.switchMonth=function(number){ return _monthArray[number]; } /*go to prev*/ _parent.on('click','.dateField-header-btn-left',function(){ switch(_switchState){ /*prev month*/ case 0: _nowDate.month--; if(_nowDate.month===0){ _nowDate.year--; _nowDate.month=12; } $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月'); $(this).parent().siblings('ul').show(); $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month)); break; /*next 12 years*/ case 2: _nowDate.year-=12; $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year)); break; default: break; } }); /*go to next*/ _parent.on('click','.dateField-header-btn-right',function(){ switch(_switchState){ /*next month*/ case 0: _nowDate.month++; if(_nowDate.month===13){ _nowDate.year++; _nowDate.month=1; } $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月'); $(this).parent().siblings('ul').show(); $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month)); break; /*next 12 years*/ case 2: _nowDate.year+=12; $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year)); break; default: break; } }); /*switch choose year or month*/ _parent.on('click','.dateField-header-datePicker',function(){ switch(_switchState){ case 0: /*switch month select*/ $(this).parent().siblings('ul').hide(); $(this).parent().parent().siblings('.dateField-body').html(self.getMonths()); _switchState=1; break; case 1: /*switch year select*/ $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year)); _switchState=2; break; default: break; } }); /*select a year*/ _parent.on('click','.dateField-select.select-year',function(){ if($(this).text()!==''){ $(this).parent().children('.dateField-select.select-year').removeClass('active'); $(this).addClass('active'); _nowDate.year=$(this).data('year'); $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月'); $(this).parent().parent().parent().find('.dateField-header-week').hide(); $(this).parent().parent().html(self.getMonths()); _switchState=1; } }); /*select a month*/ _parent.on('click','.dateField-select.select-month',function(){ if($(this).text()!==''){ $(this).parent().children('.dateField-select.select-month').removeClass('active'); $(this).addClass('active'); _nowDate.month=$(this).data('month'); $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月'); $(this).parent().parent().parent().find('.dateField-header-week').show(); $(this).parent().parent().html(self.getDays(_nowDate.year,_nowDate.month)); _switchState=0; } }); /*select a day*/ _parent.on('click','.dateField-select.select-day',function(){ if($(this).text()!==''){ var _day=$(this).text(); $(this).parent().children('.dateField-select.select-day').removeClass('active'); $(this).addClass('active'); var _selectedDate=_nowDate.year+'-'+self.formatDate(_nowDate.month)+'-'+self.formatDate(_day); _self.val(_selectedDate).attr('data-Date',_selectedDate); _self.parent().find('.dateField-container').remove(); /*template code： just for this page*/ $('#check-birthday').removeClass('fail').hide(); } }); /*close the dateFiled*/ /*click other field to close the dateField (outclick event)*/ $(document).on('click',function(e){ var temp=$(e.target); if(temp.hasClass('dateField-container') || temp.hasClass('dateField-header-btn-left') || temp.hasClass('dateField-header-datePicker') || $(e.target).hasClass('dateField-header-btn-right') || $(e.target).hasClass('dateField-select') || $(e.target)[0].id===_self.attr('id')){ ; }else{ $('.dateField-container').remove(); _switchState=0; } }); return self; } });
下面是我 写的简单的一套样式风格，有点模仿微信的风格。