//——————————————————————————————————————

//定义常数： 月份名称
var months = new Array("一　月", "二　月", "三　月", "四　月", "五　月", "六　月", "七　月","八　月", "九　月", "十　月", "十一月", "十二月");

//全局变量：显示日历层及放置日期控件
var displayDateDiv;
var displayElement;
var displayYear = (new Date()).getFullYear();
var displayMonth = (new Date()).getMonth();

//环境变量：显示边框颜色以及当前年、月高亮显示颜色
var MainBorderColor = "#E1F4EE";
var GridBorderColor = "white";
var HighlightYear = "#A9843E";
var HighlightMonth = "#A9843E";
var HighlightDay = "#A9843E";

//得到今天的日期
function Today()
{
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
}

//返回选定年月份的当月天数
function dayInMonth(year,month)
{
  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  if(month==2)
    { return (((year%4==0) && (year%100!=0)) || (year%400==0))?29:28; }
  else
    { return daysInMonth[month-1]; }
}

//判断某字符串是否是日期型
function isDateString(sDate)
{
  var iaDate = new Array(3);
  iaDate = sDate.toString().split("-");
  if (iaDate.length != 3)
    { return false; }
    
  var year = parseFloat(iaDate[0]);
  var month = parseFloat(iaDate[1]);
  var day = parseFloat(iaDate[2]);

  if(year<1000 || year>9999)
    { return false; }
  if(month<1 || month>12)
    { return false; }
  if(day<1 || day>dayInMonth(year,month))
    { return false; }
  return true;
}

//获得日期字符串的年，月，日
function getYear(sDate)
{
  if(isDateString(sDate))
    {
      var iaDate = new Array(3);
      iaDate = sDate.toString().split("-");
      return parseFloat(iaDate[0]);
    }
  else
    { return 2000; }
}
function getMonth(sDate)
{
  if(isDateString(sDate))
    {
      var iaDate = new Array(3);
      iaDate = sDate.toString().split("-");
      return parseFloat(iaDate[1]);
    }
  else
    { return 1; }
}
function getDay(sDate)
{
  if(isDateString(sDate))
    {
      var iaDate = new Array(3);
      iaDate = sDate.toString().split("-");
      return parseFloat(iaDate[2]);
    }
  else
    { return 1; }
}

//——————————————————————————————————————

//打开日历：dateDiv为日历层，attachedElement为要取得日期的元素，containerID为包含该日历的容器
function openDatePicker(dateDiv,attachedElement,containerID)
{
  newCalendar(dateDiv,attachedElement);
  setPosition(dateDiv,containerID);
  showLayer(dateDiv);
}

function showLayer(layer)
{
  layer.style.visibility="visible";
  layer.style.display="block";
}

function hideLayer(layer)
{ layer.style.visibility="hidden"; }


//创建日历
function newCalendar(dateDiv,attachedElement)
{
  //绑定放置被选择日期的控件
  if(attachedElement)
    {
      if(displayDateDiv && displayDateDiv!=dateDiv) 
        { hideLayer(displayDateDiv); }
      displayElement = attachedElement;
      //在此设定编辑框中的日期
    }
  displayDateDiv = dateDiv;
  
  //取得当天日期
  var today = new Today();
  var calendar = new Date(displayYear,displayMonth,1);
  
  //设置日历层中的HTML代码
  var dateDivName = dateDiv.id;
  var daysGrid = createCalendarGrid(calendar,today,dateDivName);
  dateDiv.innerHTML = daysGrid;
}

//生成日历层中的HTML代码
function createCalendarGrid(calendar,today,dateDivName)
{
  //创建表头
  var sGrid = "<table width='184' border='0' cellspacing='0' cellpadding='1' bgcolor='" + MainBorderColor + "'>";
  sGrid += "<tr><td>";
  sGrid += "<table width='182' border='0' cellspacing='1' cellpadding='0' bgcolor='" + GridBorderColor + "'>";
  sGrid += "<tr height='20'><td colspan='7' class='pickertitle'><p style='margin:3 5 0 5'>";
  sGrid += "<a class='picker' href='javascript:changeYear(" + dateDivName + ",-1)'>&lt;- </a>";
  if(calendar.getFullYear() == today.year)
    { sGrid += "<b><font color='" + HighlightYear + "'>" + calendar.getFullYear() + "</font></b>"; }
  else
    { sGrid += "<b>" + calendar.getFullYear() + "</b>"; }
  sGrid += "<a class='picker' href='javascript:changeYear(" + dateDivName + ",1)'> -&gt;</a>";
  sGrid += "&nbsp;";
  sGrid += "<a class='picker' href='javascript:changeMonth(" + dateDivName + ",-1)'>&lt;- </a>";
  if(calendar.getMonth() == today.month)
    { sGrid += "<b><font color='" + HighlightMonth + "'>" + months[calendar.getMonth()] + "</font></b>"; }
  else
    { sGrid += "<b>" + months[calendar.getMonth()] + "</b>"; }
  sGrid += "<a class='picker' href='javascript:changeMonth(" + dateDivName + ",1)'> -&gt;</a>";
  sGrid += "&nbsp;&nbsp;<a class='picker' href='javascript:hideLayer(" + dateDivName + ")'>Ｘ</a>";
  sGrid += "</p></td></tr>";
  
  //创建周列表
  sGrid += "<tr height='16'>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>日</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>一</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>二</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>三</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>四</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>五</p></td>";
  sGrid += "<td width='26' align='center' class='pickerweek'><p style='margin:3 0 0 0'>六</p></td>";
  sGrid += "</tr>";
  
  //填写本月日期表
  var dayOfMonth = dayInMonth(calendar.getFullYear(),calendar.getMonth() + 1);
  var dayOfMonthOfFirstSunday = (7 - calendar.getDay() + 1);
  for(var week=0;week<((calendar.getDay() + dayOfMonth) / 7);week++)
    {
      sGrid += "<tr height='16'>";
      for(var n=0;n<7;n++)
        {
          var day = (week * 7) + n + dayOfMonthOfFirstSunday - 7;
          if(day <= 0)
            { sGrid += "<td align='center' class='pickerday' onMouseOver='this.className=\"pickerdayon\"' onMouseOut='this.className=\"pickerday\"'></td>"; }
          else if(day <= dayOfMonth)
            {
              var sColor = (day == today.day)?HighlightDay:"#333333";
              var sDay = (("" + day).length == 1)?"0" + day:"" + day;
              sGrid += "<td align='center' class='pickerday' onMouseOver='this.className=\"pickerdayon\"' onMouseOut='this.className=\"pickerday\"' onClick='setDay(" + day + "," + dateDivName + ")'>";
              sGrid += "<p style='margin:3 0 0 0'>";
              sGrid += "<font color='" + sColor + "'>" + sDay + "</font>";
              sGrid += "</p></td>";
            }
          else
            { sGrid += "<td align='center' class='pickerday' onMouseOver='this.className=\"pickerdayon\"' onMouseOut='this.className=\"pickerday\"'></td>"; }
        }
      sGrid += "</tr>";
    }
    
  //结尾
  sGrid += "</table></font></td></tr></table>";
  return sGrid;
}

//确定层所在的位置
function setPosition(dateDiv,containerID)
{
  var posDivName = dateDiv.id;
  var posImgName = posDivName + 'Pos';
  var positioner = document.all[posImgName];
  dateDiv.style.left = getPos(positioner,'Left',containerID) + positioner.width - dateDiv.scrollWidth;
  dateDiv.style.top = getPos(positioner,'Top',containerID) + positioner.height;
}
function getPos(posElement,direction,containerID) 
{
  iPos = 0;
  while((posElement!=null) && (posElement.id!=containerID)) 
    {
      iPos += posElement["offset" + direction];
      posElement = posElement.offsetParent;
    }
  return iPos;
}

//——————————————————————————————————————

//变更月份后触发事件
function changeMonth(dateDiv,delta)
{
  displayMonth += delta;
  if(displayMonth >= 12)
    {
      displayMonth = 0;
      changeYear(dateDiv,1);
    }
  else if(displayMonth < 0)
    {
      displayMonth = 11;
      changeYear(dateDiv,-1);
    } 
  else
    { newCalendar(dateDiv); }
}

//变更年份后触发事件
 function changeYear(dateDiv,delta)
 {
   displayYear += delta;
   newCalendar(dateDiv);
 }

//选择日期后触发事件
 function setDay(displayDay,dateDiv)
 {
   var month = "" + (displayMonth + 1);
   if(month.length == 1)
     { month = "0" + month; }
   var day = "" + displayDay;
   if(day.length == 1)
     { day = "0" + day; }
   
   displayElement.value = displayYear + "-" + month + "-" + day;
   hideLayer(dateDiv);
 }

//——————————————————————————————————————