ASP（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 += "

";
   body += " ";
   body += "   ";
   body += " ";
   body += " ";
   body += "   ";
   body += " ";
   body += " ";
   body += "  

";    body += "    选择日期 ";    body += "    ";    body += "     [擦除] ";    body += "     [关闭]";    body += "    ";    body += "

";    body += "    ";    body += "     ";    body += "      ";    body += "      ";    body += "      ";    body += "     ";    body += "    3年4 "+ y + "年" + m + "月 3月4 ";    body += "

";    //Calendar Table Header    body += " ";    body += " ";    body += "   ";    body += "   ";    body += "   ";    body += "   ";    body += "   ";    body += "   ";    body += "   ";    body += " ";    //Insert Null Days Before The First Day In Current Month    if (j != 0)    {     body += " ";     body += ("");    }    //Loop Each Days In Current Month    for (i=1; i<=k; i++)    {     //Row Begin     if ((i+j) % 7 == 1)     {      body += " ";     }     //Cells Day By Day     body += "    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 + "";     //Row End     if ((i+j) % 7 == 0)     {      body += (" ");     }    }    //Append Null Days After The Last Day In Current Month    if ((i+j) % 7 != 0)    {     body += (" ");     body += ("");    }    if (j < (36-k))    {     body += ("");    }    if (j == 0 && k == 28)    {     body += ("");    }    //End Calendar Table    body += " 日 一 二 三 四 五 六     ";    //End Frame Table    body += "

";

   //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("

");
var calendar = new cnVeryCalendar();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
  日雨量
 
  小时雨量
 
  启始时间: 

  结束时间: