一个简单横向javascript日期控件_时间日期

var logDateControl=(function(){
  var curSelEl;  //当前选中的日期
  var styleData=[],dataStyle={};
  //获取指定id的元素
  var $=function(id){return document.getElementById(id)}
  //计算指定日期是第几周（默认为当前日期），该计算方法比较严密准确
  var calWeek=function(dt){
    var calDay=dt||new Date();  //当前要计算的时间
    var firstDay=new Date(calDay.getFullYear(),0,1);  //本年第一天
    //计算当前是本年的第几天,00：00为当天开始
    var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;  
    //本年第一天星期几
    var firstDayWeekday=firstDay.getDay();  
    //该结果加到第一周的周一，便于后面计算
    var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;  
    daysAll=daysAll+diffDay;
    return Math.ceil(daysAll/7);  //返回计算结果
  }
  //计算一个月多少天,年份4位数字，月份1-2位数字（应该是js日期格式如1月传入0）,数据非法返回-1
  var getDaysLen=function(year,month){
    if(!(/^\d{4}$/.test(year)&&/^\d{1,2}$/.test(month))){return -1}
    var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31]
    //存在2月29日
    if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29}
    return monthDays[month]
  }
  //显示日期列表,传入年、月(按日常月份传入。如二月传入2)、及显示位置
  var displayDayList=function(year,month,pos){
    var daysList=[];
    var cells1=$(pos).rows[0].cells;
    var cells2=$(pos).rows[1].cells;
    var daysArr=['日','一','二','三','四','五','六'];
    //下面的month-1转换为js月份表示
    for(var i=1,l=getDaysLen(year,--month)+1;i      var wd=new Date(year,month,i).getDay();
      cells1[i-1].className="";
      if(wd==0||wd==6){cells1[i-1].className="weekEnd";}  //为周末添加特殊样式
      //_oldCls保存当前日期的默认样式
      cells1[i-1].innerText=daysArr[wd];
      cells2[i-1].className="unSelectDay";
      cells2[i-1].setAttribute("_oldCls","unSelectDay");
      cells2[i-1].innerText=i>9?i:"0"+i;
      //匹配用户自定义样式
      var dtStr=year+"|"+(month+1)+"|"+i;
      if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){
        cells2[i-1].className="unSelectDay "+dataStyle[dtStr];
        cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]);
      }
    }
    //如果是当前月则选中当日
    if(new Date().getMonth()==month){
      curSelEl=cells2[new Date().getDate()-1];
      curSelEl.className="selectDay";
    }
    for(var j=i-1;j      cells1[j].className=cells2[j].className="";
      cells1[j].innerHTML=cells2[j].innerHTML="  ";
    }
    $(pos).onclick=function(){changeInfo()}
  }
  //根据选择的值进行处理周次和周几的调整,可以直接传入保存日期内容的dom元素，或者函数根据点击位置判断
  var changeInfo=function(e){
    e=e||event;
    var el=e.target||e.srcElement||e;  //最后一个e：可能是传入的对象
    var day=el.innerText;
    if(!/^\d{1,2}$/.test(day)) return;  //如果不是日期什么都不做
    //恢复之前选中日期的样式
    if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}
    curSelEl=el;  //保存当前处理的元素
    //更新选中日期的样式
    el.className="selectDay";
    var dt=new Date($("year").value,$("month").value-1,day);
    //更新信息
    $("day").value=day;  //日期
    $("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()];  //星期几
    $("week").value=calWeek(dt);  //第几周
  }
  //初始化
  window.attachEvent("onload",function(){
    var curDate=new Date(),curYear=curDate.getFullYear();
    //显示上下十年
    for(var i=-10;i    $("year").selectedIndex=10;  //默认选中当前年份
    $("month").selectedIndex=curDate.getMonth();  //当前月份
    $("day").value=curDate.getDate();  //当前日期
    $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];  //当前星期几
    $("week").value=calWeek();  //当前第几周
    //改变日期或年份更新日期列表
    $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")};
    //显示当月日期列表,并高亮当天的日期
    displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList");
  });

  //对外设定样式的接口。
  //格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f")
  //如果月份小于10不要带0
  var setDateStyle=function(dateArr,style){
    if(typeof dateArr!="object")return;
    if(dateArr instanceof Array){
      if(dateArr[0] instanceof Array){
        for(var i=0;i      }
      var dataStr=dateArr.join('|');
      styleData.push(dataStr);
      dataStyle[dataStr]=style;
      return;
    }
  }
  //对外接口
  return {setDateStyle:setDateStyle}
})();
//测试样式设定
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test");