jsMonthView1.1。对日期的判断更加精准,另外增加了自定义属性的示例代码,示例代码是将英文变成中文.(3/3)

  this.CreateMonthGrid = function(theYear, theMonth, theDay){ //refresh the month view to the date, main action is run this.setDayList() and set this.Source.value
    var theTextObject = this.Source;
    if (theTextObject == null){
      return;
    }
    var theName = this.Name;
    var theYearObject = document.all.item(theName + "_YearList");
    var theMonthObject = document.all.item(theName + "_MonthList");
    var tmpYear = theYear;
    var tmpMonth = theMonth;
    var tmpDay = 1;
    if (tmpMonth < 0){
      tmpYear--;
      tmpMonth = 11;
    }
    if (tmpMonth > 11){
      tmpYear++;
      tmpMonth = 0;
    }
    if (tmpYear < this.MinYear){
      tmpYear = this.MinYear;
    }
    if (tmpYear > this.MaxYear){
      tmpYear = this.MaxYear;
    }
    if (theDay < 1){
      tmpDay = 1;
    }else{
      tmpDay = this.GetMonthDays(tmpYear, tmpMonth);
      if (theDay < tmpDay){
        tmpDay = theDay;
      }
    }
    theYearObject.value = tmpYear;
    theMonthObject.value = tmpMonth;
    this.setDayList(tmpYear, tmpMonth, tmpDay);
    theTextObject.value = this.SetDateFormat(tmpYear, tmpMonth, tmpDay);
    theTextObject.select();
  }
  this.UpdateMonthGrid = function(theObject){ //run this.CreateMonthGrid() by theObject
    var theTextObject = this.Source;
    if (theTextObject == null){
      return;
    }
    var theName = this.Name;
    var theYearObject = document.all.item(theName + "_YearList");
    var theMonthObject = document.all.item(theName + "_MonthList");
    var theDayObject = document.all.item(theName + "_DayList");
    var tmpName = theObject.id.substr(theObject.id.lastIndexOf("_"));
    switch (tmpName){
      case "_goPreviousMonth": //go previous month button
        theObject.disabled = true;
        this.CreateMonthGrid(parseInt(theYearObject.value, 10), parseInt(theMonthObject.value, 10) - 1, parseInt(theDayObject.value, 10));
        theObject.disabled = false;
        break;
      case "_goNextMonth": //go next month button
        theObject.disabled = true;
        this.CreateMonthGrid(parseInt(theYearObject.value, 10), parseInt(theMonthObject.value, 10) + 1, parseInt(theDayObject.value, 10));
        theObject.disabled = false;
        break;
      case "_YearList": //year list
        this.CreateMonthGrid(parseInt(theYearObject.value, 10), parseInt(theMonthObject.value, 10), parseInt(theDayObject.value, 10));
        break;
      case "_MonthList": //month list
        this.CreateMonthGrid(parseInt(theYearObject.value, 10), parseInt(theMonthObject.value, 10), parseInt(theDayObject.value, 10));
        break;
      default:
        return;
    }
  }
  this.DeleteMonthGrid = function( ){ //check document focus, if blur this.Source then delete this
    var theName = this.Name;
    var theDivObject = document.all.item(theName + "_MonthView");
    if (theDivObject == null){
      return;
    }
    var tmpObject = document.activeElement;
    while (tmpObject != null){
      if (tmpObject == this.Source){
        return;
      }
      //if (tmpObject.id == theName + "_MonthView"){
      //  return;
      //}
      //if (tmpObject.id == theName + "_MonthGrid"){
      //  return;
      //}
      if (tmpObject.id == theName + "_goPreviousMonth"){
        return;
      }
      if (tmpObject.id == theName + "_goNextMonth"){
        return;
      }
      if (tmpObject.id == theName + "_YearList"){
        return;
      }
      if (tmpObject.id == theName + "_MonthList"){
        return;
      }    
      if (tmpObject.id == theName + "_DayList"){
        return;
      }
      tmpObject = tmpObject.parentElement;
    }
    if (tmpObject == null){ //delete the month view
      theDivObject.outerHTML = "";
      var theDate = new Date(this.GetTextDate(this.Source.value));
      if (isNaN(theDate)){
        this.Source.value = "";
      }else{
        this.Source.value = this.SetDateFormat(theDate.getFullYear(), theDate.getMonth(), theDate.getDate());
      }
      this.Source = null;
    }
  }
  this.InitialMonthView = function( ){
    var theName = this.Name;
    var theValue = this.Source.value;
    var theCurrentDate = new Date(this.GetTextDate(theValue));
    if (isNaN(theCurrentDate)){
      theCurrentDate = new Date();
    }
    var theDivHTML = "<div id=\"" + theName + "_MonthView\" onBlur=\"document.jsMonthView.DeleteMonthGrid();\">";
    theDivHTML += "  <table width=\"" + this.Width.toString() + "\" height=\"" + this.Height.toString() + "\" style=\"" + this.MonthGridStyle + "\" cellpadding=\"0\" cellspacing=\"0\">";
    theDivHTML += "    <tr>";
    theDivHTML += "      <td align=\"center\" valign=\"top\">";
    theDivHTML += "        <table width=\"100%\" height=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
    theDivHTML += "          <tr align=\"center\" style=\"" + this.HeaderStyle + "\">";
    theDivHTML += "            <td>";
    theDivHTML += "              <input type=\"button\" tabIndex=\"-1\" style=\"" + this.MonthBtStyle + "\" id=\"" + theName + "_goPreviousMonth\" value=\"" + this.PreviousMonthText + "\" onClick=\"document.jsMonthView.UpdateMonthGrid(this)\" onBlur=\"document.jsMonthView.DeleteMonthGrid()\">";
    theDivHTML += "            </td>";
    theDivHTML += "            <td>";
    theDivHTML += "              <select id=\"" + theName + "_MonthList\">";
    theDivHTML += "              </select>";
    theDivHTML += "            </td>";
    theDivHTML += "            <td>";
    theDivHTML += "              <select id=\"" + theName + "_YearList\">";
    theDivHTML += "              </select>";
    theDivHTML += "              <input type=\"hidden\" id=\"" + theName + "_DayList\" value=\"1\">";
    theDivHTML += "            </td>";
    theDivHTML += "            <td>";
    theDivHTML += "              <input type=\"button\" tabIndex=\"-1\" style=\"" + this.MonthBtStyle + "\" id=\"" + theName + "_goNextMonth\" value=\"" + this.NextMonthText + "\" onClick=\"document.jsMonthView.UpdateMonthGrid(this)\" onBlur=\"document.jsMonthView.DeleteMonthGrid()\">";
    theDivHTML += "            </td>";
    theDivHTML += "          </tr>";
    theDivHTML += "          <tr>";
    theDivHTML += "            <td colspan=\"4\" bgcolor=\"" + this.UnselectBgColor + "\">";
    theDivHTML += "              <div id=\"" + theName + "_MonthGrid\"><br></div>";
    theDivHTML += "            </td>";
    theDivHTML += "          </tr>";
    theDivHTML += "        </table>";
    theDivHTML += "      </td>";
    theDivHTML += "    </tr>";
    theDivHTML += "  </table>";
    theDivHTML += "</div>";
    document.body.insertAdjacentHTML("beforeEnd", theDivHTML);
    theDivObject = document.all.item(theName + "_MonthView");
    theDivObject.style.position = "absolute";
    theDivObject.style.posLeft = this.GetoffsetLeft(this.Source);
    theDivObject.style.posTop = this.GetoffsetTop(this.Source) + this.Source.offsetHeight;
    this.CreateYearList(this.MinYear, this.MaxYear);
    this.CreateMonthList();
    this.CreateMonthGrid(theCurrentDate.getFullYear(), theCurrentDate.getMonth(), theCurrentDate.getDate());
  }
}
function CreateMonthView(theTextObject){ //the month view create interface, fire at element@#s onFocus event
  if (theTextObject.readOnly == true){
    return;
  }
  if (document.jsMonthView != null){
    if (document.jsMonthView.Source == theTextObject){
      return;
    }else{
      document.jsMonthView.DeleteMonthGrid();
    }
  }
  document.jsMonthView = new DefineMonthView(theTextObject);
  //begin insert your code, change the month view propertiy
  //for example:  
  document.jsMonthView.DateFormat = "<yyyy>年<m>月<d>日";
  document.jsMonthView.TodayListStyle = "font-family:Verdana; font-size:12px; color:#000000;";
  document.jsMonthView.TodayTitle = "今天:"
  document.jsMonthView.MonthListStyle = "font-family:宋体; font-size:12px; color:#000000;";
  document.jsMonthView.MonthName[0] = "一月";
  document.jsMonthView.MonthName[1] = "二月";
  document.jsMonthView.MonthName[2] = "三月";
  document.jsMonthView.MonthName[3] = "四月";
  document.jsMonthView.MonthName[4] = "五月";
  document.jsMonthView.MonthName[5] = "六月";
  document.jsMonthView.MonthName[6] = "七月";
  document.jsMonthView.MonthName[7] = "八月";
  document.jsMonthView.MonthName[8] = "九月";
  document.jsMonthView.MonthName[9] = "十月";
  document.jsMonthView.MonthName[10] = "十一月";
  document.jsMonthView.MonthName[11] = "十二月";
  document.jsMonthView.WeekListStyle = "font-family:宋体; font-size:16px; color:#000000;";
  document.jsMonthView.WeekName[0] = "日";
  document.jsMonthView.WeekName[1] = "一";
  document.jsMonthView.WeekName[2] = "二";
  document.jsMonthView.WeekName[3] = "三";
  document.jsMonthView.WeekName[4] = "四";
  document.jsMonthView.WeekName[5] = "五";
  document.jsMonthView.WeekName[6] = "六";
  //end insert, and then execute InitialMonthView() method
  document.jsMonthView.InitialMonthView();
  //insert your other code, these code do not touch the month view
  theTextObject.select();
}
function DeleteMonthView(theTextObject){ //the month view delete interface, fire at element@#s onBlur event
  if (document.jsMonthView == null){
    return;
  }
  document.jsMonthView.DeleteMonthGrid();
  if (document.jsMonthView.Source == null){
    document.jsMonthView = null;
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="">
  <INPUT type="text" name="textfield" value="example 1"
   onFocus="CreateMonthView(this)"
   onBlur="DeleteMonthView(this)">
  <INPUT type="button" name="textfield2" value="example 2"
   onFocus="CreateMonthView(this)"
   onBlur="DeleteMonthView(this)">
  <INPUT type="button" name="Button" value="Show All Elements" onClick="ShowAllElements(document.forms[0])">
  <SCRIPT language="javascript">
    function ShowAllElements(theform){
      var i=0,HTML_Str;
      HTML_Str = "<table border=1><tr><td>Type</td><td>Name</td><td>Id</td><td>Value</td></tr>";
      for (i=0;i<theform.elements.length;i++){
        HTML_Str += "<tr>";
        HTML_Str += "<td>" + theform.elements[i].type + "</td>";
        HTML_Str += "<td>" + theform.elements[i].name + "</td>";
        HTML_Str += "<td>" + theform.elements[i].id + "</td>";
        HTML_Str += "<td>" + theform.elements[i].value + "</td>";
        HTML_Str += "</tr>";
      }
      debug.innerHTML = HTML_Str + "</table>";
    }
  </SCRIPT>
</FORM>
<DIV id="debug">
setp 1.copy or link the head@#s script block to destination page;<br>
step 2.set the destination element@#s onFocus="CreateMonthView(this)";<br>
step 3.set the destination element@#s onBlur="DeleteMonthView(this)";<br>
step 4.runing. the destination element@#s value is the date.<br>
</DIV>
</BODY>
</HTML>

原文转自：http://www.ltesting.net