当前位置:编程学习 > JAVA >>

自己动手----写JavaScript日历(2)

  离上一篇好几天了.
    完善了一下:
      1.浏览器兼容(IE,Firefox,Chrome)
      2.添加一个日期点击事件
引入CSS(皮肤)
<link rel="stylesheet" type="text/css" href="calendar/skin/default/calendar.css" />
使用方法
    var calendar = new Calendar();
    calendar.dayRenderer = todayx.calendarDayRenderer; // 自定义的日期渲染器
   
    calendar.addSelectedDateChangeListener(function(date,cal){ // 添加日期选中事件监听器
        var d = DateUtil.format(date,'MM-dd');
        window.location.href = 'index.php?date=' + d;
    },'a'); // 这个'a',参数是事件处理器的id,可选
   
    calendar.show("calendar",420);  // 作为id为calendar容器的子元素显示,宽度为420

自定义的渲染器
    function calendarDayRenderer(week,day,div,cal,isToday){ // day = -1 时,表示空格
        if(day == -1){
            return " ";   
        }else{
            var str = DateUtil.format(div.model.date,'yyyy-MM-dd');           
            var ___d = DateUtil.format(div.model.date,'MM-dd'); // DateUtil为calendar.js中的工具类
            var y = div.model.date.getFullYear();
            //str += day < 10 ? "0" + day : "" + day;           
            var a = document.createElement("a");
            a.href = "index.php?y=" + y + "&date=" + ___d;           
            if(isToday){
                a.title = "今天 " + str;               
            }else{
                a.title = str;               
            }           
            a.innerHTML = day;
            a.style.display = "block";                   
            if(isToday){
                a.style.color = 'red';                               
            }           
            return a;           
        }
    }

\

作者“pcenshao”

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,