ASP(JS)—日期时间控件

<!----------setday.js------------------>

<!-----------JS控制时间弹出窗口------------------>

function cnVeryCalendar()
{
//Style
var border_frame   = '#468DDD';
var border_inner   = '#f6f6f6';
var fore_frameCaption = '#ffffff';
var back_frameCaption = '#468DDD';
var fore_currentMonth = '#ff0000';
var back_weekName   = '#e9e9e9';
var back_nullDay   = '#fafafa';
var fore_dayMouseOver = '#ff6600';
var back_dayMouseOver = '#eeeeee';
var font_cnChar   = 'font-family:宋体,sans-serif; font-size:12px;';
var font_numChar   = 'font-family:tahoma,arial,sans-seirf; font-size:11px;';
var style_cell   = 'line-height:14px; border-color:' + border_inner;
var today_decoration = "font-weight:bold; background:url('images/calendar_today.gif') center no-repeat;"
       // "font-weight:bold"

//Declare
var reciever;
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;


//Return Max Days In The Month
this.daysInMonth = function(y, m)
{
   switch (m)
   {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
     return 31;
    case 4:
    case 6:
    case 9:
    case 11:
     return 30;
    case 2:
     //Is Leep Year
     if (y % 4 != 0)
     {
      return 28;
     }
     if (y % 100 == 0)
     {
      return y % 400 == 0 ? 29 : 28;
     }
     return 29;
   }
}


//Generate Codes
this.generateCalendarTable = function()
{
   var i;
   var j = new Date(y, m-1, 1).getDay();
   var k = this.daysInMonth(y, m);
   var body = '';

   //Frame Table Header
   body += "<table align='center' cellpadding='2' cellspacing='1' width='100%' height='100%' style='border:1px " + border_frame + " solid; background:white;'>";
   body += " <tr>";
   body += "   <td style='background:" + back_frameCaption + ";" + font_cnChar + "' height='20'>";
   body += "    <div style='color:" + fore_frameCaption + "; float:left'><b>选择日期</b></div>";
   body += "    <div style='float:right'>";
   body += "     <a href=/"javascript:calendar.setValue('')/" style='color:" + fore_frameCaption + "; text-decoration:none;" + font_cnChar + "'>[擦除]</a> ";
   body += "     <a href='javascript:calendar.fadeOut()' style='color:" + fore_frameCaption + "; text-decoration:none;" + font_cnChar + "'>[关闭]</a>";
   body += "    </div>";
   body += "   </td>";
   body += " </tr>";
   body += " <tr>";
   body += "   <td style='padding-bottom:0px'>";
   body += "    <table align='center' width='99%' cellpadding='0' cellspacing='0'>";
   body += "     <tr>";
   body += "      <td style='" + font_cnChar + "'><a href='javascript:calendar.loadPreviousYear()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>3</font></a>年<a href='javascript:calendar.loadNextYear()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>4</font></a></td>";
   body += "      <td align='center' nowrap='nowrap' style='color:" + fore_currentMonth + ";" + font_cnChar + "'><b>"+ y + "年" + m + "月</b></td>";
   body += "      <td align='right' style='" + font_cnChar + "'><a href='javascript:calendar.loadPreviousMonth()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>3</font></a>月<a href='javascript:calendar.loadNextMonth()' style='text-decoration:none; color:" + fore_dayMouseOver + "'><font face='webdings'>4</font></a></td>";
   body += "     </tr>";
   body += "    </table>";
   body += "   </td>";
   body += " </tr>";
   body += " <tr>";
   body += "   <td>";

   //Calendar Table Header
   body += "<table align='center' width='99%' cellpadding='3' cellspacing='0' border='1' bordercolor='" + border_inner + "' style='border-collapse:collapse; table-layout:fixed;'>";
   body += " <tr align='center' style='background:" + back_weekName + "'>";
   body += "   <td style='" + font_cnChar + style_cell + "'>日</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>一</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>二</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>三</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>四</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>五</td>";
   body += "   <td style='" + font_cnChar + style_cell + "'>六</td>";
   body += " </tr>";

   //Insert Null Days Before The First Day In Current Month
   if (j != 0)
   {
    body += "<tr align='center'>";
    body += ("<td style='background:" + back_nullDay + style_cell + "' colspan='" + j + "'></td>");
   }

   //Loop Each Days In Current Month
   for (i=1; i<=k; i++)
   {
    //Row Begin
    if ((i+j) % 7 == 1)
    {
     body += "<tr align='center'>";
    }

    //Cells Day By Day
    body += "<td";
    body += " οnmοuseοver=/"this.style.backgroundColor='" + back_dayMouseOver + "'; this.style.color='" + fore_dayMouseOver + "'/"";
    body += " οnmοuseοut=/"this.style.backgroundColor=''; this.style.color=''/"";
    body += " οnclick=/"calendar.setValue('" + y + "-" + m + "-" + i + "')/"";
    if (y == today.getFullYear() && m == today.getMonth()+1 && i == today.getDate())
    {
     body += " style=/"cursor:hand; " + today_decoration + "; " + font_numChar + style_cell + "/"";
    }
    else
    {
     body += " style='cursor:hand; " + font_numChar + style_cell + "'";
    }
    body += ">" + i + "</td>";

    //Row End
    if ((i+j) % 7 == 0)
    {
     body += ("</tr>");
    }
   }

   //Append Null Days After The Last Day In Current Month
   if ((i+j) % 7 != 0)
   {
    body += ("<td style='background:" + back_nullDay + style_cell + "' colspan='" + (8 - (i+j)%7) + "'></td>");
    body += ("</tr>");
   }
   if (j < (36-k))
   {
    body += ("<tr><td colspan='7' style='background:" + back_nullDay + style_cell + "'>&nbsp;</td></tr>");
   }
   if (j == 0 && k == 28)
   {
    body += ("<tr><td colspan='7' style='background:" + back_nullDay + style_cell + "'>&nbsp;</td></tr>");
   }

   //End Calendar Table
   body += "</table>";

   //End Frame Table
   body += "</td></tr></table>";

   //Return
   return body;
}


//Load Previous Year
this.loadPreviousYear = function()
{
   y--;
   __cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();
}
this.loadNextYear = function()
{
   y++;
   __cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();
}
this.loadPreviousMonth = function()
{
   m--;
   if (m < 1)
   {
    m = 12;
    y--;
   }
   __cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();
}
this.loadNextMonth = function()
{
   m++;
   if (m > 12)
   {
    m = 1;
    y++;
   }
   __cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();
}


//Get Position
this.getAbsolutePosition = function(element)
{
   var point = { x: element.offsetLeft, y: element.offsetTop };
   //Recursion
   if (element.offsetParent)
   {
    var parentPoint = this.getAbsolutePosition(element.offsetParent);
    point.x += parentPoint.x;
    point.y += parentPoint.y;
   }
   return point;
};


//Pop Layer
this.setHook = function(dateField)
{
 
   if (__cnVeryCalendarContainer.style.display != 'none' && reciever.id == dateField.id)
   {
    __cnVeryCalendarContainer.style.display = 'none';
    return;
   }
   reciever = dateField;

   //-- 如果不想在第二次打开日历时回归为当前月,则把下面两行注释掉或删掉 --
   y = today.getFullYear();
   m = today.getMonth() + 1;
   //----------------------------

   var point = this.getAbsolutePosition(dateField);
  // __cnVeryCalendarContainer.style.left = (point.x + dateField.offsetWidth + 5) + 'px';
  // __cnVeryCalendarContainer.style.top = point.y + 'px';
   __cnVeryCalendarContainer.style.left = (point.x ) + 'px';
   __cnVeryCalendarContainer.style.top =  (point.y + 20) + 'px';
   __cnVeryCalendarContainer.innerHTML = this.generateCalendarTable();
   __cnVeryCalendarContainer.style.display = '';
}


//Hide Layer
this.fadeOut = function()
{
   __cnVeryCalendarContainer.style.display = 'none';
}


//Click a Day Cell To Add The Value
this.setValue = function(date)
{
   reciever.value = date;
   this.fadeOut();
}
}

//Render Instance
document.write("<div id='__cnVeryCalendarContainer' style='width:200px; height:190px; position:absolute; float:left; display:none; z-index:999'></div>");
var calendar = new cnVeryCalendar();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!-------------------显示时间调用页面---------------------->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title><%=JMApplicationTitle %></title>
<script language="JavaScript" src="../setday.js"></script>

</head>
<body>
<form id="yuliangform1" name="yuliangform1" method="post" target="_self">

<table  id="datagrid" width="680"  border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ffffff" bordercolordark="#FFFFFF" bordercolorlight="#000000" >
  <tr align="center">
  <td width="80" height="35" border=#568ac2 background="../images/button1.jpg" align="center" onClick="yuliangxz('ri')" οnmοusemοve="javascript:this.style.cursor='hand';">日雨量</td>
  <td width="20"></td>
  <td width="80" height="35" border=#568ac2 background="../images/button1.jpg" align="center" onClick="yuliangxz('shi')" οnmοusemοve="javascript:this.style.cursor='hand';">小时雨量</td>
  <td width="40"></td>
  <td width="220" height="35" border=#568ac2 align="center"><STRONG>启始时间:<input size="11" name='stDate' id='stDate' value='' readonly='readonly'  style='cursor:hand' οnclick=calendar.setHook(this)  title='请选择开始日期'><select name="fromtime"></select>&nbsp;
</STRONG></font></td>
  <td width="220" height="35" border=#568ac2 align="center"><STRONG>结束时间:<input size="11" name='edDate' id='edDate' value='' readonly='readonly'  style='cursor:hand' οnclick=calendar.setHook(this)  title='请选择截止日期'><select name="totime"></select>&nbsp;
</STRONG></font></td>
  <td width="20"></td>
  </tr>
</table>
</form>

</body>
</html>

<!------------------------给时间框赋初值--------------------------->

<script language="javascript">
 var  now  =  new  Date(); 
 var  yy  =  now.getYear(); 
 var  mm  =  now.getMonth()+1;
 var  dd  =  now.getDate();
 thisdate = yy + "-" + mm + "-" + dd
 document.getElementById("stdate").value = thisdate;
 document.getElementById("eddate").value = thisdate;
 for ( var i = 0 ;i <= 23;i++ ){
  oOption = document.createElement( "OPTION" );
  oOption.value = i;
  oOption.text =  i ;
  yuliangform1.fromtime.options.add( oOption );
  if ( i == 8 )
   oOption.selected = true;
  oOption = document.createElement( "OPTION" );
  oOption.value = i;
  oOption.text =  i ;
  yuliangform1.totime.options.add( oOption );
  if ( i == 8 )
   oOption.selected = true;
 } 
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值