js日期控件

 

 
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("日","一", "二", "三", "四", "五", "六");

var cId="";

document.writeln("<div id='Calendar'></div>");
function getToday(){
    //得到今天的年,月,日 
    this.now = new Date();   
    this.year = this.now.getFullYear();
    this.month = this.now.getMonth();
    this.day = this.now.getDate();
    this.hour=this.now.getHours();
    this.minute=this.now.getMinutes();
    this.second=this.now.getSeconds();
}
var cday=(new getToday()).day;
function getDays(month, year){
    //闰年计算
    if (1 == month)
        return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
    else
        return daysInMonth[month];
}

function showCalendar(){ 
 cId=arguments[0];
 var today = new getToday();  
 var cyear=today.year;
 var cmonth=today.month;
 var cday=today.day;
 var chour=today.hour;
 var cmin=today.minute;
 var csec=today.second;
 var divContent="<div id='xx'></div><div id='yy'></div><div id='zz'></div>";
 $("#Calendar").show();
 var calendar=document.getElementById("Calendar");
 calendar.style.backgroundColor='green';
 var html="";
 //Year
 html+="<select id='year' onchange='newCalendar()'>";
 for(var i=cyear-5;i<=cyear+20;i++){
  html+="<option value='"+i+"'"+(i==cyear?"selected":"")+">"+i+"</option>";
 }
 html+="</select>";
 //Month
 html+="<select id='month' onchange='newCalendar()'>";
 for(var i=0;i<months.length;i++){
  html+="<option value='"+(i+1)+"'"+(i==cmonth?"selected":"")+">"+months[i]+"</option>";
 }
 html+="</select>";
 //Hour
 html+="&nbsp;&nbsp;&nbsp;&nbsp;<select id='hour'>";
 for(var i=0;i<24;i++){
  html+="<option value='"+i+"'"+(i==chour?"selected":"")+">"+(i<10?"0":"")+i+"</option>";
 }
 html+="</select>";
 //Minute
 html+="：<select id='min'>";
 for(var i=0;i<60;i++){
  html+="<option value='"+i+"'"+(i==cmin?"selected":"")+">"+(i<10?"0":"")+i+"</option>";
 }
 html+="</select>";
 //Second
 html+="：<select id='sec'>";
 for(var i=0;i<60;i++){
  html+="<option value='"+i+"'"+(i==csec?"selected":"")+">"+(i<10?"0":"")+i+"</option>";
 }
 html+="</select>";
 html+="<table><tr>";
 for(var i=0;i<7;i++){
  var dayColor="";
  dayColor=(i==0||i==6)?"style='font-color:red'":"";
  html+="<td style='text-align:center'"+dayColor+">"+days[i]+"</td>";
 } 
 html+="</tr></table>";
 var width=280;
 calendar.innerHTML=divContent;
 $("#xx").html(html);
 html="";
 html+="&nbsp;&nbsp;&nbsp;&nbsp;[<a href=javascript:_chooseNow()>现在</a>]&nbsp;&nbsp;&nbsp;&nbsp;";
 html+="&nbsp;&nbsp;&nbsp;&nbsp;[<a href=javascript:_clearCalendar()>清空</a>]&nbsp;&nbsp;&nbsp;&nbsp;";
 html+="&nbsp;&nbsp;&nbsp;&nbsp;[<a href=javascript:_ok()>确定</a>]";
 $("#zz").html(html);
    calendar.style.visibility='hidden';
    newCalendar(cday);
    calendar.style.position="absolute";
    calendar.style.zIndex="1";
    calendar.style.background="#FFF";
    calendar.style.filter="alpha(opacity=100)";
    calendar.style.border="1px solid #8dcff4";
    calendar.style.mozOpacity="1";
    calendar.style.width=width+"px";
    calendar.style.height="130px";
    calendar.style.textAlign="center";
  
    var tt=document.getElementById(cId);
    var ttop  = tt.offsetTop; 
    var thei  = tt.clientHeight;
    var twid = tt.clientWidth;
    var tleft = tt.offsetLeft;  
    var ttyp  = tt.type;
    while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
    calendar.style.top=(ttyp=="image")? ttop+thei : ttop+thei+6;
    calendar.style.left=tleft+twid-width+1;  
}

function newCalendar(){
 var selYear=$("#year").val();
 var selMon=$("#month").val();
 if(arguments[0]!=null&&arguments[0]!=undefined){
  cday=arguments[0];
 }
 var html="";
 var ii=getWeek(selYear,selMon,1);
 html+="<table>";
 var d=1;
 for(var r=0;r<Math.ceil((ii+getDays(selMon-1,selYear))/7);r++){  
  html+="<tr>";
  for(var c=0;c<7;c++){
   if(c<getWeek(selYear,selMon,d)){
    html+="<td></td>"
   }else{
    html+="<td id='y"+d+"' onmouseover=\"this.style.cursor='hand',this.style.backgroundColor='#CCFF99'\" onmouseout=\"this.style.backgroundColor=''\"onclick='chooseDay("+d+","+selMon+","+selYear+")' align='center'>"+d+++"</td>"
    if(d>getDays(selMon-1,selYear)) break;
   }   
  }  
  html+="</tr>";
 }
 html+="</table>"; 
 $("#yy").html(html);
 chooseDay(cday,selMon,selYear);
 document.getElementById("Calendar").style.visibility="";
}

function getWeek(year,month,day){
 return toDate(year+"-"+month+"-"+day).getDay();
}

function chooseDay(d,m,y){ 
 for(var i=1;i<=daysInMonth[m-1];i++){
  var oo=document.getElementById("y"+i);
  var dd=getWeek(y,m,i);  
  oo.style.color=(dd==0||dd==6)?'red':'black';
  oo.style.fontSize='150%';
  var today=new Date();
  if(i==today.getDate()&&m==today.getMonth()+1) oo.style.color='green';
  oo.style.fontWeight='normal';
 }
 var obj=document.getElementById("y"+d);
 while(obj==null) {
  obj=document.getElementById("y"+--d);
 }
 obj.style.color='yellow';
 obj.style.fontSize='150%';
 obj.style.fontWeight='bold';
 cday=d;
}

function _ok(){ 
 cyear=$("#year").val();
 chour=$("#hour").val();
 cmonth=$("#month").val();
 cmin=$("#min").val();
 csec=$("#sec").val();
 var dStr=cyear+"-"+addZero(cmonth)+"-"+addZero(cday)+" "+addZero(chour)+":"+addZero(cmin)+":"+addZero(csec);
 document.getElementById(cId).value=dStr;
 document.getElementById("Calendar").style.visibility="hidden";
}

function _chooseNow(){ 
 document.getElementById(cId).value=getNowDateTime();
 document.getElementById("Calendar").style.visibility="hidden";
}

function _clearCalendar(){
 document.getElementById(cId).value="";
 document.getElementById("Calendar").style.visibility="hidden";
}

function getNowDateTime(){
    var tDate=new Date();   
    return tDate.getYear()+"-"+(tDate.getMonth()+1)+"-"+addZero(tDate.getDate())+" "+addZero(tDate.getHours())+":"+addZero(tDate.getMinutes())+":"+addZero(tDate.getSeconds());
}

//日期时间一位数补0
function addZero(dd){
 return dd<10?"0"+dd:dd;
}

 

 

要引用这个控件：

时间：<input type="text" name="pubTime" id="pubTime"  readonly onclick="showCalendar('pubTime')" />