CSS+JS打造的一款日历小控件 - 代码效果

JS 调用： var calendar=new Calendar("calendar",2000);

接口：calendar.getValue(),返回选择的日期，例:20160101,calendar.setValue(date),设置默认日期,date{string},例：calendar.setValue('2016-01-01')。

≡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS+JS打造的一款日历小控件</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    #box{ margin:200px auto; width:400px;}
    .red{ color:red;}
    .date{ cursor:pointer;}
    .today{ background:#F90; font-weight:bold;cursor:pointer;}
    .calendar_span{ display:inline-block; width:160px; height:20px; border:1px #ccc solid; position:relative; vertical-align:middle;}
    .calendar_icon{ width:20px; height:20px; display:inline-block; background:url() center center no-repeat; position:absolute; left:140px; top:0; cursor:pointer;}
    .calendar_input{ width:140px; height:20px; line-height:20px; border:0; position:absolute; left:0; top:0;}
    .calendar_wrap{ position:absolute; width:220px; left:-1px; top:20px;}
    .calendar_date{ text-align:center; border:1px #ccc solid; border-bottom:0;}
    .calendar_date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
    .calendar_date .closeBtn{background:url(); width:20px; height:20px; margin:-4px auto auto 15px;}
    .preMonth{background:url(); margin-left:15px;}
    .nextMonth{background:url();}
    .calendar_select{ margin:0 10px;}
    .calendar_table table{ width:100%; border-collapse:collapse;}
    .calendar_table th,.calendar_table td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
    .calendar_table tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
    </style>
    </head>
    <body>
    <div id="box">
    <span>日期:</span><span><input type="text" id="calendar" class="calendar_input" readonly="readonly" /></span>
    </div>
    <script type="text/javascript">
    var doc=document;
    function $(element){
    return 	typeof element=="string"?doc.getElementById(element):element;
    }
    function $$(className){
    var _tag=null,_class=[];
    var tag=doc.getElementsByTagName('*');
    for(var i=0,len=tag.length;i<len;i++){
    _tag=tag[i];
    if(_tag.className==className){
    _class.push(_tag);
    }
    }
    if(_class.length==1){
    return _class[0]
    }else{
    return _class;
    }
    }
    function Calendar(){
    //input元素对象
    this.input=$(arguments[0]);
    this.init.apply(this,arguments);
    }
    Calendar.prototype={
    init:function(input,startY,endY){
    var div=this._createCalendar();
    this._initCalendarStyle(input,div);
    this._finishCalendarStruct(startY,endY);
    this._showCalendar(input,div);
    this._setTodayDate(input);
    this._selectChange();
    this._clickBtn(startY,endY);
    this._setInputValue(input);
    this._closeCalendar();
    },
    //取日期值,reutrn{string} 例20130101
    getValue:function(){
    var input=this.input;
    var value=input.value.replace(/-/gi,'');
    return value;
    },
    //设置默认显示时间 value{string} 例:setValue('2013-01-01');
    setValue:function(value){
    var input=this.input;
    var selectY=$$('selectYear'),selectM=$$('selectMonth')
    var year=parseInt(value);
    var month=parseInt(value.substring(5,7))-1;
    var date=parseInt(value.substring(9,11));
    this._setSelectValue(selectM,month);
    this._setSelectValue(selectY,year);
    this._setCalendar(year,month);
    input.value=value;
    },
    //初始化日历样式
    _initCalendarStyle:function(input,calendarDiv){
    var input=$(input);
    var inputP=input.parentNode;
    inputP.className="calendar_span";
    var span=this.create('span');
    span.className="calendar_icon";
    inputP.appendChild(span);
    inputP.appendChild(calendarDiv);
    },
    //return:日历div
    _createCalendar:function(){
    var wrapDiv='';
    var div=this.create('div');
    div.className="calendar_wrap";
    div.style.display="none";
    wrapDiv+='<div class="calendar_date">';
    wrapDiv+='<a class="preMonth" title="上一月"></a>';
    wrapDiv+='<span class="calendar_select"><select class="selectYear"></select><select class="selectMonth"></select></span>';
    wrapDiv+='<a class="nextMonth" title="下一月"></a>';
    wrapDiv+='<a class="closeBtn" title="关闭"></a>';
    wrapDiv+='</div>';
    wrapDiv+='<div class="calendar_table"></div>';
    div.innerHTML=wrapDiv;
    return div;
    },
    //生成日历主体
    _finishCalendarStruct:function(startY,endY){
    var date=new Date(),_this=this;
    var selectY=$$('selectYear'),selectM=$$('selectMonth'),calendarTable=$$('calendar_table');
    if(!endY){
    endY=date.getFullYear();
    }
    //生成下拉菜单
    for(var i=startY;i<=endY;i++){
    var _option=_this.create('option');
    selectY.appendChild(_option);
    _option.value=i;
    _option.innerHTML=i;
    }
    for(var j=0;j<12;j++){
    var _option2=_this.create('option');
    selectM.appendChild(_option2);
    _option2.value=j;
    _option2.innerHTML=j+1+"月";
    }
    //生成日历table
    var cTable='<table><thead><tr>';
    cTable+='<th class="red">日</th><th>一</th> <th>二</th><th>三</ht><th>四</th><th>五</th><th class="red">六</th>';
    cTable+='</tr></thead>';
    cTable+='<tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
    cTable+='</tbody></table>';
    calendarTable.innerHTML=cTable;
    },
    //鼠标移入移出日期
    _mouseOn:function(obj){
    obj.onmouseover=function(){
    if(this.innerHTML){
    this.style.background="#bbb";
    }
    }
    obj.onmouseout=function(){
    this.style.	background="";
    }
    },
    //获取下拉菜单的默认值
    _getSelectValue:function(selectObj){
    var selectList=selectObj.getElementsByTagName('option');
    for(var i=0,len=selectList.length;i<len;i++){
    var _option=selectList[i];
    if(_option.selected){
    return parseInt(_option.value);
    }
    }
    },
    //设置下拉菜单默认值
    _setSelectValue:function(selectObj,value){
    var selectList=selectObj.getElementsByTagName('option');
    for(var i=0,len=selectList.length;i<len;i++){
    var _option=selectList[i];
    if(parseInt(_option.value)==value){
    _option.selected=true;
    break;
    }
    }
    },
    //显示隐藏日历
    _showCalendar:function(input,element){
    var _this=this;
    document.onclick=function(event){
    var e=event||window.event;
    var t=e.target||e.srcElement;
    if(t.className=='calendar_icon'||t.className=='calendar_input'){
    if(element.style.display=="none"){
    element.style.display="block";
    _this._resizeCalendar(input,element);
    }else{
    element.style.display="none";
    }
    }
    }
    },
    //调整日历位置，向下显示不全则向上显示，否则向下显示
    _resizeCalendar:function(input,calendarDiv){
    var input=$(input);
    var winH=document.documentElement.clientHeight;
    var _offset=this.offset(input);
    var top=_offset.top;
    var bottom=winH-top+input.offsetHeight;
    if(bottom<calendarDiv.offsetHeight){
    calendarDiv.style.top=(-calendarDiv.offsetHeight)+"px";
    }else{
    calendarDiv.style.top=(input.offsetHeight)+"px";
    }
    },
    //设置今日时间
    _setTodayDate:function(input){
    var _this=this,input=$(input);
    var selectY=$$('selectYear'),selectM=$$('selectMonth'),calendarTable=$$('calendar_table');
    var table=calendarTable.getElementsByTagName('table')[0];
    var date=new Date();
    var year=date.getFullYear(),month=date.getMonth(),_date=date.getDate(),day=date.getDay();
    var _month=month+1;
    _month<10?_month="0"+_month:_month;
    _date<10?_date="0"+_date:_date;
    input.value=year+"-"+_month+"-"+_date;
    _this._setSelectValue(selectM,month);
    _this._setSelectValue(selectY,year);
    this._setCalendar(year,month);
    },
    //接受两个参数:年和月，显示出year年month月的日历
    _setCalendar:function(year,month){
    var date=new Date();
    var _year=date.getFullYear();
    var _month=date.getMonth();
    var _date=date.getDate();
    date.setYear(year);
    date.setMonth(month);
    date.setDate(1);
    var day=date.getDay();
    var _this=this;
    var monthDays=this._getMonthDays(year,month);
    var table=$$('calendar_table').getElementsByTagName('table')[0];
    var td=table.getElementsByTagName('td');
    for(var k=0;k<td.length;k++){
    td[k].innerHTML="";
    td[k].className="";
    }
    for(var i=day,len=td.length;i<len;i++){
    var _td=td[i];
    var j=i-day+1;
    _td.innerHTML=j;
    _td.className="date";
    if(_year==year&&_month==month&&_date==j){
    _td.className="today";
    }else{
    _this._mouseOn(_td);
    }
    if(j>=monthDays){
    break;
    }
    }
    },
    //下拉菜单选择日期
    _selectChange:function(){
    var _this=this;
    var selectY=$$('selectYear'),selectM=$$('selectMonth')
    selectY.onchange=function(){
    var year=_this._getSelectValue(selectY);
    var month=_this._getSelectValue(selectM);
    _this._setCalendar(year,month);
    }
    selectM.onchange=function(){
    var year=_this._getSelectValue(selectY);
    var month=_this._getSelectValue(selectM);;
    _this._setCalendar(year,month);
    }
    },
    //前一月、下一月单击事件
    _clickBtn:function(startYear,endYear){
    var _this=this,year=0,pre=$$('preMonth'),next=$$('nextMonth');
    var selectY=$$('selectYear'),selectM=$$('selectMonth')
    pre.onclick=function(){
    year=_this._getSelectValue(selectY);
    var month=_this._getSelectValue(selectM)-1;
    if(month<0){
    month=11;
    year--;
    }
    if(!isYearOver(year)){
    return;
    }
    _this._setSelectValue(selectM,month);
    _this._setSelectValue(selectY,year);
    _this._setCalendar(year,month);
    }
    next.onclick=function(){
    year=_this._getSelectValue(selectY);
    var month=_this._getSelectValue(selectM)+1;
    if(month>11){
    month=0;
    year++;
    }
    if(!isYearOver(year)){
    return;
    }
    _this._setSelectValue(selectM,month);
    _this._setSelectValue(selectY,year);
    _this._setCalendar(year,month);
    }
    function isYearOver(year){
    var date=new Date();
    var _endYear=endYear?endYear:date.getFullYear();
    if(year>_endYear||year<startYear){
    alert("超出日期范围");
    return false;;
    }else{
    return true;
    }
    }
    },
    //点击日期将日期显示到input标签
    _setInputValue:function(input){
    var input=$(input),_this=this;
    var table=$$('calendar_table').getElementsByTagName('table')[0];
    var selectY=$$('selectYear'),selectM=$$('selectMonth')
    table.onclick=function(event){
    var e=event||window.event;
    var t=e.target||e.srcElement;
    if(t.nodeName.toLowerCase()=='td'&&t.innerHTML){
    var year=_this._getSelectValue(selectY);
    var month=_this._getSelectValue(selectM)+1;
    var date=t.innerHTML;
    month<10?month="0"+month:month;
    date.length==1?date="0"+date:date;
    input.value=year+"-"+month+"-"+date;
    $$('calendar_wrap').style.display="none";
    if(document.all){
    e.cancleBubble=true;
    }else{
    e.stopPropagation();
    }
    }
    }
    },
    //日历关闭按钮
    _closeCalendar:function(){
    $$('closeBtn').onclick=function(){
    $$('calendar_wrap').style.display="none";
    }
    },
    //取style值,obj{string|object} _style{string},样式名称
    getStyle:function(obj,_style){
    var node=typeof obj=="string"?$(obj):obj;
    return doc.all?node.currentStyle[_style]:window.getComputedStyle(node,null)[_style];
    },
    //元素在页面的偏移量:return{object} object.left 左偏移 object.right 右偏移
    offset:function(obj){
    var _offset={};
    var _scroll={};
    if(document.documentElement.scrollTop||document.documentElement.scrollLeft){
    _scroll.left=document.documentElement.scrollLeft;
    _scroll.top=document.documentElement.scrollTop;
    }else{
    _scroll.left=document.body.scrollLeft;
    _scroll.top=document.body.scrollTop;
    }
    var node=typeof obj=="string"?$(obj):obj;
    var left=node.offsetLeft,top=node.offsetTop;
    for(var o=node;o.parentNode;o=o.parentNode){
    var _position=this.getStyle(o.parentNode,'position');
    if(_position!="static"){
    left+=o.parentNode.offsetLeft;
    top+=o.parentNode.offsetTop;
    }
    if(o.parentNode.nodeName.toLowerCase()=='html'){
    break;
    }
    }
    _offset.left=left-_scroll.left;
    _offset.top=top-_scroll.top;
    return _offset;
    },
    //返回某个月的天数
    _getMonthDays:function(year,month){
    var monthAry=[31,28,31,30,31,30,31,31,30,31,30,31];
    if(year%400==0){
    monthAry[1]=29;
    }else{
    if(year%4==0&&year%100!=0){
    monthAry[1]=29;
    }
    }
    return monthAry[month];
    },
    create:function(tagName){
    return document.createElement(tagName);
    }
    }
    var calendar=new Calendar("calendar",2000);
    </script>
    </body>
    </html>

提示：输入修改代码都可运行！