一个横向的日期JS效果

Categories: 前端, 网站相关
Tags: ,
Comments: No Comments
Published on: 2011 年 12 月 08 日

一个纠结原因的一个产物,网上很多的都没什么兼容性,下边的算是搞定了所有兼容性问题。

<!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>
<title>new document</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* {
	font-size:14px
}
/*日期最外层*/ 
    #logCalendar {
	width:950px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
}
/*日期内部所有单元格*/ 
#logCalendar td {
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
	height:22px;
	line-height:22px;
	table-layout:fixed;
}
#daysList {
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
}
/*日期列表所有单元格*/ 
#daysList td {
	text-align:center;
	height:22px;
	line-height:22px;
	table-layout:fixed;
}
/*周次及星期几的输入框*/ 
    .bd {
	border:0;
	text-align:center;
	color:#00f
}
/*日期默认样式*/ 
    .unSelectDay {
	color:#00f;
	font-weight:normal;
	padding:3px;
	cursor:pointer;
	text-decoration:underline
}
/*当前点击的日期样式*/ 
    .selectDay {
	color:#fff;
	font-weight:bold;
	background:#FEB0B0;
	padding:1px;
	text-decoration:none;
	cursor:normal
}
/*周末样式*/ 
    .weekEnd {
	color:#f00
}
.test {
	color:#f00;
	text-decoration:none
}
.tdhiding{ display:none;}
.tddisplay{display:block;}
</style>
<script type="text/javascript"> 
 //2007-12-21 工作日志日期组件 yanwei 
 //使用闭包隐藏所有变量和函数,防止与外界冲突 
var logDateControl=(function(){ 
    var curSelEl;    //当前选中的日期 
    var styleData=[],dataStyle={}; 
    //获取指定id的元素 
    var $=function(id){return document.getElementById(id)} 
	//判断浏览器类型
	var isIE=isIE||(function(){
    	var browser=function(str){return navigator.userAgent.indexOf(str)>-1}
    	return browser("MSIE")&&browser("compatible")&&!browser("Opera");
    })();
	//对于非IE浏览器的处理
	if(!isIE){
		//innerText
		HTMLElement.prototype.__defineSetter__("innerText",function(sText){this.textContent=sText});
		HTMLElement.prototype.__defineGetter__("innerText",function(){return this.textContent})
	}
	//绑定事件兼容性处理
    var attachEvent=function(evt,handler,obj){
    obj=obj||window;
    if(obj.addEventListener){
      obj.addEventListener(evt,handler,false);
    }else{
      obj.attachEvent("on"+evt,handler);
    }
    }
    //计算指定日期是第几周(默认为当前日期),该计算方法比较严密准确 
    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<l;i++){
            var wd=new Date(year,month,i).getDay(); 
            cells1[i-1].className=""; 
            if(wd==0||wd==6){cells1[i-1].className="weekEnd tddispaly";}    //为周末添加特殊样式 
            //_oldCls保存当前日期的默认样式 
			cells1[i-1].innerText=daysArr[wd]; 
            cells2[i-1].className="unSelectDay tddispaly"; 
            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<31;j++){ 
            cells1[j].className=cells2[j].className="tdhiding"; 
            cells1[j].innerHTML=cells2[j].innerHTML=""; 
			
        } 
		$(pos).onclick=function(e){e=e||event;changeInfo(e)}
    } 
    //根据选择的值进行处理周次和周几的调整,可以直接传入保存日期内容的dom元素,或者函数根据点击位置判断 
    var changeInfo=function(e){ 
        var el=e.target||e.srcElement;    //最后一个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);    //第几周 
    } 

    //初始化 
    var init=function(){
        var curDate=new Date(),curYear=curDate.getFullYear(); 
        //显示上下十年 
        for(var i=-10;i<10;i++)
		{$("year")[$("year").length]=new Option(curYear+i,curYear+i)
		 //  try
//			{
//			$("year").add(new Option(curYear+i,curYear+i),null);
//			}
//		    catch(ex)
//			{
//			$("year").add(new Option(curYear+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"); 
    };
    attachEvent("load",init);
    //对外设定样式的接口。 
    //格式:([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<dateArr.length;i++) setDateStyle(dateArr[i],style); 
				return;
            } 
            var dataStr=dateArr.join('|'); 
            styleData.push(dataStr); 
            dataStyle[dataStr]=style; 
            return; 
        } 
    } 
    //对外接口 
    return {setDateStyle:setDateStyle} 
})(); 
//测试样式设定 
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test"); 
 </script>
</head>
<body>
<table cellpadding="3" cellspacing="0" id="logCalendar">
  <tr style="height:22px;">
    <td style="width:200px;">第 <input type="text" name="week" id="week" class="bd" readonly size="2" /> 周</td>
    <td style="width:100px;">星期 <input type="text" name="weekday" id="weekday" class="bd" readonly size="2" /></td>
    <td rowspan="2" style="padding:0;"><table width="100%" cellpadding="3" height="100%" cellspacing="0" id="daysList">
        <tr id="tr1" style="height:22px;">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr id="tr2">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><select name="year" id="year">
      </select>
      年
      <select name="month" id="month">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      月</td>
    <td>日期 <input type="text" name="day" id="day" readonly size="2" class="bd" /></td>
  </tr>
</table>
</body>
</html>

最多留言日志

No Comments - Leave a comment

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is 星期一, 2017 年 11 月 20 日