一个简单横向javascript日期控件

最新推荐文章于 2024-05-01 15:00:00 发布

raas

最新推荐文章于 2024-05-01 15:00:00 发布

阅读量585

点赞数

分类专栏： web代码文章标签： javascript function date generator input class

web代码专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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="" />
<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;
        padding-left:5px;text-align:center;
        height:22px;line-height:22px;
    }
    #daysList{border-top:1px solid #ccc;border-left:1px solid #ccc}
    /*日期列表所有单元格*/
    #daysList td{text-align:center;height:22px}

    /*周次及星期几的输入框*/
    .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}
</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 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";}    //为周末添加特殊样式
            //_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<31;j++){
            cells1[j].className=cells2[j].className="";
            cells1[j].innerHTML=cells2[j].innerHTML=" ";
        }
        $(pos).οnclick=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<10;i++){$("year").add(new Option(curYear+i,curYear+i))}
        $("year").selectedIndex=10;    //默认选中当前年份
        $("month").selectedIndex=curDate.getMonth();    //当前月份
        $("day").value=curDate.getDate();    //当前日期
        $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];    //当前星期几
        $("week").value=calWeek();    //当前第几周
        //改变日期或年份更新日期列表
        $("year").οnchange=$("month").οnchange=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<dateArr.length;i++) setDateStyle(dateArr[i],style);
            }
            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>