`
xiegangthrille
  • 浏览: 92057 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

javascript写的一个日期控件

JavaScriptJ#IEFirefoxOpera 
阅读更多

比较简单，可能还存在bug,不过兼容IE,firefox,opera.

<!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>日期控件</title>
    <script type="text/javascript">
var DateComp=function(){
    this.input_text=false;
    this.contain_date=false;
    this.contain_date_top=false;
    this.contain_date_main=false;
    var _this=this;
    this.date=false;
    var pub={
        init:function(){
            _this=this;
            this.date=new Date();
            this.input_text=document.createElement("input");
            this.input_text.type="text";
            this.input_text.onclick=function(){
                _this.createDate();
            }
            this.style();
        },
        createDate:function(){
            this.contain_date=document.createElement("div");
            this.contain_date_top=document.createElement("div");
            this.contain_date_main=document.createElement("div");
            var obj=this.input_text;
            with(this.contain_date.style){
                                position = "absolute";
		                        var ttop=obj.offsetTop+obj.offsetHeight;
		                        var tleft=obj.offsetLeft;
		                        while(obj=obj.offsetParent){
		                            ttop+=obj.offsetTop;
		                            tleft+=obj.offsetLeft;
		                        }
		                        top=ttop;
		                        left=tleft;
                                width="153px";
                                height="150px";
                                fontSize="8pt";
                                paddingTop="2px";
                                textAlign="center";
                                border="1px solid #66ccff";
                            }
           with(this.contain_date_top.style){
                width="100%";
                height="25px";
                background="#66ccff";
           }
           with(this.contain_date_main.style){
                width="100%";
                height="120px";
                background="#ffffff";
           }
           
           this.year=document.createElement("select");
           for(var i=this.date.getFullYear()-10;i<this.date.getFullYear()+10;i++)
           {
               this.year.options.add(new Option(i+"年",i));
           }
           this.year.value=this.date.getFullYear();
           this.month=document.createElement("select");
           for(var i=1;i<13;i++)
           {
               this.month.options.add(new Option(i+"月",i));
           }
           this.month.value=this.date.getMonth()+1;
           
           this.year.onchange=function(){
                 _this.showDate(this.value,_this.month.value);
           }
           
            this.month.onchange=function(){
                 _this.showDate(_this.year.value,this.value);
           }
           
          this.contain_date.appendChild(this.contain_date_top);
          this.contain_date_top.appendChild(this.year);
          this.contain_date_top.appendChild(this.month);  
          this.contain_date.appendChild(this.contain_date_main);
          document.body.appendChild(this.contain_date);
          this.showDate(2009,9);
            
        },
        showDate:function(year,month){
          this.contain_date_main.innerHTML="";
          var arr=new Array("日","一","二","三","四","五","六");
          var table=document.createElement("table");
          var thead=document.createElement("thead");
          var tbody=document.createElement("tbody");
          var tr_thead=document.createElement("tr");
              for(var j in arr){
                  var td=document.createElement("th");
                      td.innerHTML=arr[j];
                      tr_thead.appendChild(td);
                 
              }
              for(var i=0;i<5;i++){
                var tr_tbody=document.createElement("tr");
                    for(var j in arr){
                    var td=document.createElement("td");
                        td.onclick=function(){
                            _this.input_text.value=_this.year.value+"-"+((_this.month.value>=10)?(_this.month.value):("0"+_this.month.value))+"-"+((parseInt(this.innerHTML)>=10)?(this.innerHTML):("0"+this.innerHTML));
                            document.body.removeChild(_this.contain_date);
                        }
                        td.onmouseover=function(){
                            this.style.background="#ccffcc";
                        }
                        td.onmouseout=function(){
                            this.style.background="#ffffff";
                        }
                         tr_tbody.appendChild(td);
                     }
                     tbody.appendChild(tr_tbody);
              }
              
              thead.appendChild(tr_thead);
              table.appendChild(thead);
              table.appendChild(tbody);
              table.border="0";
              table.cellSpacing="0";
              table.cellpadding="0";
              table.bgcolor="gray";
              with(table.style){
                width="100%";
                height="100%";
              }
              with(thead.style){
                background="#ccffff";
              }
               var monthCount=new Date(year,month,0).getDate();
                   var i=1;
                   for(var j=1;j<monthCount+1;j++){
                        if(new Date(year,month-1,j).getDay()==6){
                            table.rows[i++].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
                        }else{
                            table.rows[i].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
                        }
                        if(j==new Date().getDate()){
                             table.rows[i].cells[new Date(year,month-1,j).getDay()].style.background="#ccff00";       
                        }
                   }

          this.contain_date_main.appendChild(table);
        },
        style:function(){
             with(this.input_text.style){
                width="150px";
            }
        },
        getComponent:function(){
          return this.input_text;
        }
    };
    pub.init();
    return pub;
}

    </script>
    <script type="text/javascript">
        window.onload=function(){
            var date=new DateComp();
            document.body.appendChild(date.getComponent());
        }
    </script>
</head>
<body>

</body>
</html>
 
分享到：
| 兼容IE、Firefox浏览器ajax写法，.Net为后 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics