13-16.txt

开发王代码 代码

<script type="text/javascript">
<!--
//单击输入文本框右侧的按钮将触发这个函数
function displayCalendar(){
  drawCalendar();
}
//单击日期输入控件底部的关闭按钮将触发这个函数
//这个函数将清空alendarContainer的内容，也就等于是关闭了日期输入控件
function closeCalendar(){
  var oCalendarContainer = document.getElementById("calendarContainer");
  oCalendarContainer.innerHTML = "";
}
//下面的函数创建日期输入控件
function drawCalendar(sYear,sMonth){
  var newDate;
  //初始打开的时候是当前系统的日期，否则使用自定义的日期
  //自定义的日期往往是由日期输入控件顶部的两个按钮来控制的
  if(arguments[0]==null||arguments[1]==null){
    newDate = new Date();
  }else{
    newDate = new Date(sYear,sMonth-1);
  }
  var date_year = newDate.getFullYear();
  var date_month = newDate.getMonth()+1;
  var date_today = newDate.getDate();
  var date_day = newDate.getDay();
  //下面的几个变量用于给日期输入控件顶部的两个按钮提供事件参数
  //如果当前是8月，那么向前翻就是9月，向后翻就是7月
  //但是，当前月是12月或者1月时就应该注意，因为这个时候将会有年份的变化
  var nextMonth = date_month+1;
  var nextYear = date_year;
  var prevMonth = date_month-1;
  var prevYear = date_year;
  if(sMonth==12){nextMonth=1;nextYear=date_year+1;}
  if(sMonth==1){prevMonth=12;prevYear=date_year-1;}
  var calendarTable="";
  calendarTable += '<table width="150" border="0" cellpadding="0" '+
                   ' cellspacing="1" '+
                   ' style="background-color:#0066FF;text-align:center;">';
  calendarTable += '  <tr style="background-color:#339999;">';
  //向后翻月
  calendarTable += '    <td onclick="javascript:drawCalendar('+
                                  prevYear+','+prevMonth+');" '+
          ' style="cursor:pointer;background-color:#FF6600;"><<</td>';
  calendarTable += '    <td colspan="5">'+date_year+
                                   "年"+date_month+'月</td>';
  //向前翻月
  calendarTable += '    <td onclick="javascript:drawCalendar('+nextYear+
                                   ','+nextMonth+');" '+
          ' style="cursor:pointer;background-color:#FF6600;">>></td>';
  calendarTable += '  </tr>';    
  //星期表头
  calendarTable += '  <tr style="background-color:#6699FF;">';
  calendarTable += '    <td>日</td>';
  calendarTable += '    <td>一</td>';
  calendarTable += '    <td>二</td>';
  calendarTable += '    <td>三</td>';
  calendarTable += '    <td>四</td>';
  calendarTable += '    <td>五</td>';
  calendarTable += '    <td>六</td>';
  calendarTable += '  </tr>';  

  //计算一个月内的天数，这里要注意是否闰月
  var dayNum_in_month = [31,28,31,30,31,30,31,31,30,31,30,31]
  var isleapyear = date_year%4;
  if (isleapyear == 0) {
    dayNum_in_month[1] = "29";
  }
  var month_alldays = dayNum_in_month[date_month-1];
  //计算行数       
  var line_top;
  var line_bot;
  if ((date_today-date_day+1)%7 != 0) {
	// line_top表示当前日期上面的行数，包括当前行
	line_top = Math.floor((date_today-date_day+1)/7)+1;
  } else {
	line_top = Math.floor((date_today-date_day+1)/7);
  }
  if ((30-date_today+date_day+1)%7 != 0) {
	// line_bot表示当前日期下面的行数，不包括当前行
	line_bot = Math.floor((30-date_today+date_day+1)%7)+1;
  } else {
	line_bot = Math.floor((30-date_today+date_day+1)%7);
  }
  //定义一个二维数组，我们预备是一个6X7的数组，数组中每个元素就对应一个单元格
  var dateList = new Array([""],[""],[""],[""],[""],[""],[""]);
  var dateCell;
  for (var i=1; i<7; i++) {
    //i就是行数
    calendarTable += '  <tr>';
    for (var j=0; j<7; j++) {
	  //j就是列数
	  dateList[i][j] = date_today-7*(line_top-i+1)+j-date_day;
	  //如果日期值<=0，那么将它置空
	  if ((date_today-7*(line_top-i+1)+j-date_day) <= 0) {
		dateList[i][j] = "&nbsp;";
	  }
	  //如果值大于当月总天数，那么文本框不显示值
	  if ((date_today-7*(line_top-i+1)+j-date_day)>month_alldays) {
	    dateList[i][j] = "&nbsp;";
	  }
	  if (dateList[i][j] != "&nbsp;") {
		//如果单元格不为空，那么就可以设置其可以触发事件，有三个事件：
		//[01]单击事件，将会把当前日期写到输入文本框
		//[02]鼠标指针移到单元格上面事件，将会改变背景突出显示
		//[03]鼠标指针移出单元格事件，将会初始化背景
		dateCell = '<td onclick="javascript:setDateText('+date_year+
                   ','+date_month+',this.firstChild.nodeValue);" '+
                   ' onmouseover="javascript:setFocus(this);" '+
                   '  onmouseout="javascript:setFocusOut(this);" '+
                   '  style="cursor:pointer;">'+dateList[i][j]+'</td>';
	    if (i == line_top+1 && j==date_day){
	        //当前日期的设置，包括改变文本的颜色以突出显示，也包含同样的三个事件
		  dateCell = '<td onclick="javascript:setDateText('+date_year+
                   ','+date_month+',this.firstChild.nodeValue);" '+
                   '  onmouseover="javascript:setFocus(this);" '+
                   '  onmouseout="javascript:setFocusOut(this);" '+
                   '  style="background-color:#FF6600;cursor:pointer;">'+
                   dateList[i][j]+'</td>';
	    }
	  }else{
	    dateCell = "<td>&nbsp;</td>";
	  }	  
	  calendarTable += dateCell;
	}
    calendarTable += '</tr>';
  }
  calendarTable += '<tr><td colspan="7" '+
                   '  onclick="javascript:closeCalendar();"'+
                   '  style="background-color:#339999;cursor:pointer;"> '+
                   '关闭</td></tr>';
  calendarTable += '</table>'; 
  //将输入日期控件写入calendarContainer
  var oCalendarContainer = document.getElementById("calendarContainer");
  oCalendarContainer.innerHTML = calendarTable;
}
//当鼠标指针指到这个日期上时触发这个函数设置背景
function setFocus(who){
  who.style.backgroundColor="#FF6600";
  
}
//当鼠标指针离开这个日期时触发这个函数还原背景
function setFocusOut(who){
  who.style.backgroundColor="";
}
//当鼠标单击触发这个函数，为日期文本框赋值
function setDateText(sYear,sMonth,sDate){
  var oDateText = document.getElementById("dateText");
  oDateText.value = sYear+"-"+sMonth+"-"+sDate;
}
-->
</script>