用JS写的一个日历

最新推荐文章于 2023-10-13 15:00:14 发布
最新推荐文章于 2023-10-13 15:00:14 发布
阅读量1.5k 收藏
点赞数
分类专栏： JavaScript 文章标签： 日历 function button date border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itzhiren/article/details/1113058
版权

<link href="images/style.css" rel="stylesheet" type="text/css">
<body onLoad="CreateMonthView(gcrq)">
<table width="102%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td width="6%" height="28" bgcolor="#DDDDDD"><div align="center"><img src="images/calendar.gif" width="18" height="18"></div></td>
    <td width="14%" bgcolor="#<%if action="" then%>B3D1FF<%else%>DDDDDD<%end if%>" class="column_title_black"  onMouseOver="this.style.backgroundColor='B3D1FF'" onMouseOut="this.style.backgroundColor=''"><div align="center"><a href="?" class="head_black">日程安排</a></div></td>
    <td width="20%" bgcolor="#<%if action="search" then%>B3D1FF<%else%>DDDDDD<%end if%>" class="column_title_black" onMouseOver="this.style.backgroundColor='B3D1FF'" onMouseOut="this.style.backgroundColor=''"><div align="center">
      <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr style="cursor:hand">
          <td width="30%"><div align="center"><img src="images/infofind_small.gif" width="27" height="26"></div></td>
          <td width="70%"><a href="?action=search" target="mainFrame" class="head_black">日程安排查询</a> </td>
        </tr>
      </table>
    </div></td>
    <td width="60%" bgcolor="#DDDDDD" class="column_title_black">&nbsp;</td>
  </tr>
</table>
<table width="98%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td class="column_title_while">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="8%"><div align="right"><img src="images/calendar.gif" width="18" height="18">&nbsp;&nbsp;&nbsp;</div></td>
    <td width="81%" class="column_title_while">日程安排</td>
    <td width="11%">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="column_title_while">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="middle"><input name="gcrq" type="hidden" id="gcrq" value=""></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
<Script language="javascript">

<!--

//this is jsMonthView 1.0, author is Chinese DengKang (2002-07-12).

//I allow your do any modify, but i don't bear any liability.

//browser: IE 4 and later

function DefineMonthView(theTextObject){ //the month view construct function
 this.GetOnlyName = function( ){ //create one and only name on the document
  var theName = "MV"; //prefix
  var aryName = new Array();
  aryName[0] = "_MonthView"; //the month view main body's name postfix
  aryName[1] = "_MonthGrid"; //the month view day area's name postfix
  aryName[2] = "_goPreviousMonth"; //the month view go previous month button's name postfix
  aryName[3] = "_goNextMonth"; //the month view go next month button's name postfix
  aryName[4] = "_YearList"; //the month view year list's name postfix
  aryName[5] = "_MonthList"; //the month view month list's name postfix
  aryName[6] = "_DayList"; //keep the month view current day's element name postfix
  aryName[7] = "_goNextYear";
  aryName[8] = "_goPreviousYear";
  var i = -1, j = 0, maxi = 2000;
  var exTag = true;
  while ((exTag == true) && (i < maxi)){
   i++;
   exTag = false;
   for (j=0;j<aryName.length;j++){
//    if ((j!=2)||(j!=3)){//不显示上月和下月
     if (document.all.item(theName + i.toString() + aryName[j]) != null){
      exTag = true;
     }
//    }
   }
  }
  if (exTag == false){
   return(theName + i.toString());
  }
  else{
   return("_" + theName);
  }
 }
 var theName = this.GetOnlyName();
 this.Name = theName; //the month view name
 this.Source = theTextObject; //the month view act on theTextObject
 this.MinYear = 1970; //year list min value
 //return between 1000 and 9999 and <= this.MaxYear
 this.MaxYear = 2030; //year list max value
 //return between 1000 and 9999 and >= this.MinYear
 this.Width = 200; //the month view main body's width
 this.Height = 120; //the month view main body's height
 this.DateFormat = "<yyyy>-<mm>-<dd>"; //the date format
 //<yy> or <yyyy> is year, <m> or <mm> is digital format month, <MMM> or <MMMMMM> is character format month, <d> or <dd> is day, other char unchanged
 //this function setting year, month and day sequence
 //example:
 // <yyyy>-<mm>-<dd> : 2002-04-01
 // <yy>.<m>.<d> : 02.4.1
 // <yyyy> Year <MMMMMM> Month <d> Day : 2002 Year April Month 1 Day
 // <m>/<d>/<yy> : 4/1/02
 // <MMM> <dd>, <yyyy> : Apr 01, 2002
 // <MMMMMM> <d>, <yyyy> : April 1, 2002
 // <dd> <MMM> <yyyy> : 01 Apr 2002
 // <dd>/<mm>/<yyyy> : 01/04/2002
 this.UnselectBgColor = "#FFFFFF"; //the month view default background color
 this.SelectedBgColor = "#808080"; //the selected date background color
 this.SelectedColor = "#FFFFFF"; //the selected date front color
 this.DayBdWidth = "1"; //the day unit border width, unit is px
 this.DayBdColor = this.UnselectBgColor; //the day unit border color,default is this.UnselectBgColor
 this.TodayBdColor = "#"; //denote today's date border color
 this.InvalidColor = "#808080"; //it is not current month day front color
 this.ValidColor = "#0000FF"; //it is current month day front color
 this.WeekendBgColor = this.UnselectBgColor; //the weekend background color, default is this.UnselectBgColor
 this.WeekendColor = this.ValidColor; //the weekend front color, default is this.ValidColor
 this.YearListStyle = "font-size:12px; font-family:宋体;"; //the year list's style
 this.MonthListStyle = "font-size:12px; font-family:宋体;"; //the month list's style
 this.MonthName = new Array(); //month name list, font is include this.MonthListStyle
 this.MonthName[0] = "1月";
 this.MonthName[1] = "2月";
 this.MonthName[2] = "3月";
 this.MonthName[3] = "4月";
 this.MonthName[4] = "5月";
 this.MonthName[5] = "6月";
 this.MonthName[6] = "7月";
 this.MonthName[7] = "8月";
 this.MonthName[8] = "9月";
 this.MonthName[9] = "10月";
 this.MonthName[10] = "11月";
 this.MonthName[11] = "12月";
 this.TitleStyle = "cursor:default; color:#000000; background-color:" + this.UnselectBgColor + "; font-size:16px; font-weight:bolder; font-family:Times new roman; text-align:center; vertical-align:bottom;"; //the month view title area's style
 this.WeekName = new Array(); //week name list, font is include this.TitleStyle
 this.WeekName[0] = "日";
 this.WeekName[1] = "一";
 this.WeekName[2] = "二";
 this.WeekName[3] = "三";
 this.WeekName[4] = "四";
 this.WeekName[5] = "五";
 this.WeekName[6] = "六";
 this.FooterStyle = "cursor:hand; color:#FF0000; background-color:" + this.UnselectBgColor + "; font-size:18px; font-family:Verdana; text-align:left; vertical-align:middle;"; //the month footer area's style
 this.TodayTitle = "今天:"; //today tip string, font is include this.FooterStyle
 this.MonthBtStyle = "font-family:Marlett; font-size:12px;"; //the change month button style
 this.PreviousMonthText = "3"; //the go previous month button text
 //font is include this.MonthBtStyle
 this.NextMonthText = "4"; //the go next month button text
 //font is include this.MonthBtStyle
 this.MonthGridStyle = "border-width:1px; border-style:solid; border-color:#000000;"; //the month view main body's default style
 this.HeaderStyle = "height:32px; background-color:menu;"; //the month view header area's style
 this.LineBgStyle = "height:10px; background-color:" + this.UnselectBgColor + "; text-align:center; vertical-align:middle;"; //the month view title area and day area compart area background style
 this.LineStyle = "width:90%; height:1px; background-color:#000000;"; //the month view title area and day area compart area front style
 this.DayStyle = "cursor:hand; font-size:12px; font-family:Verdana; text-align:center; vertical-align:middle;"; //the month view day area's style
 this.OverDayStyle = "this.style.textDecoration='underline';"; //the mouse over a day style
 this.OutDayStyle = "this.style.textDecoration='none';"; //the mouse out a day style
 this.GetoffsetLeft = function(theObject){ //return theObject's absolute offsetLeft
  var absLeft = 0;
  var thePosition="";
  var tmpObject = theObject;
  while (tmpObject != null){
   thePosition = tmpObject.position;
   tmpObject.position = "static";
   absLeft += tmpObject.offsetLeft;
   tmpObject.position = thePosition;
   tmpObject = tmpObject.offsetParent;
  }
  return absLeft;
 }
 this.GetoffsetTop = function(theObject){ //return theObj's absolute offsetTop
  var absTop = 0;
  var thePosition = "";
  var tmpObject = theObject;
  while (tmpObject != null){
   thePosition = tmpObject.position;
   tmpObject.position = "static";
   absTop += tmpObject.offsetTop;
   tmpObject.position = thePosition;
   tmpObject = tmpObject.offsetParent;
  }
  return absTop;
 }
 this.GetFormatYear = function(theYear){//format theYear to 4 digit
  var tmpYear = theYear;
  if (tmpYear < 100){
   tmpYear += 1900;
   if (tmpYear < 1970){
    tmpYear += 100;
   }
  }
  if (tmpYear < this.MinYear){
   tmpYear = this.MinYear;
  }
  if (tmpYear > this.MaxYear){
   tmpYear = this.MaxYear;
  }
  return(tmpYear);
 }
 this.GetMonthDays = function(theYear, theMonth){ //get theYear and theMonth days number
  var theDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  var theMonthDay = 0, tmpYear = this.GetFormatYear(theYear);
  theMonthDay = theDays[theMonth];
  if (theMonth == 1){ //theMonth is February
   if(((tmpYear % 4 == 0) && (tmpYear % 100 != 0)) || (tmpYear % 400 == 0)){
    theMonthDay++;
   }
  }
  return(theMonthDay);
 }
 this.SetDateFormat = function(theYear, theMonth, theDay){//format a date to this.DateFormat
  var theDate = this.DateFormat;
  var tmpYear = this.GetFormatYear(theYear);
  
  var tmpMonth = theMonth;
  if (tmpMonth < 0){
   tmpMonth = 0;
  }
  if (tmpMonth > 11){
   tmpMonth = 11;
  }
  var tmpDay = theDay;
  if (tmpDay < 1){
   tmpDay = 1;
  }
  else{
   tmpDay = this.GetMonthDays(tmpYear, tmpMonth);
   if (theDay < tmpDay){
    tmpDay = theDay;
   }
  }
  theDate = theDate.replace(/<yyyy>/g, tmpYear.toString());
  theDate = theDate.replace(/<yy>/g, tmpYear.toString().substr(2,2));
  theDate = theDate.replace(/<MMMMMM>/g, this.MonthName[tmpMonth]);
  theDate = theDate.replace(/<MMM>/g, this.MonthName[tmpMonth].substr(0,3));
  if (theMonth < 9){
   theDate = theDate.replace(/<mm>/g, "0" + (tmpMonth + 1).toString());
  }else{
   theDate = theDate.replace(/<mm>/g, (tmpMonth + 1).toString());
  }
  theDate = theDate.replace(/<m>/g, (tmpMonth + 1).toString());
  if (theDay < 10){
   theDate = theDate.replace(/<dd>/g, "0" + tmpDay.toString());
  }else{
   theDate = theDate.replace(/<dd>/g, tmpDay.toString());
  }
  theDate = theDate.replace(/<d>/g, tmpDay.toString());
  return(theDate);
 }
 this.GetTextDate = function(theString){ //convert a string to a date, if the string is not a date, return a empty string
  var i = 0, tmpChar = "", find_tag = "";
  var start_at = 0, end_at = 0, year_at = 0, month_at = 0, day_at = 0;
  var tmp_at = 0, one_at = 0, two_at = 0, one_days = 0, two_days = 0;
  var aryDate = new Array();
  var tmpYear = -1, tmpMonth = -1, tmpDay = -1;
  var tmpDate = theString.toLowerCase();
  var defDate = "";
  end_at = tmpDate.length;
  for (i=1;i<end_at;i++){
   if (tmpDate.charAt(i)=="0"){
    tmpChar = tmpDate.charAt(i-1);
    if (tmpChar<"0" || tmpChar>"9"){
     tmpDate = tmpDate.substr(0,i-1) + "-" + tmpDate.substr(i+1);
    }
   }
  }
  for (i=0;i<9;i++){
   tmpDate = tmpDate.replace(this.MonthName[i].toLowerCase().substr(0,3), "-00" + (i+1).toString() + "-");
  }
  for (i=9;i<12;i++){
   tmpDate = tmpDate.replace(this.MonthName[i].toLowerCase().substr(0,3), "-0" + (i+1).toString() + "-");
  }
  tmpDate = tmpDate.replace(/jan/g, "-001-");
  tmpDate = tmpDate.replace(/feb/g, "-002-");
  tmpDate = tmpDate.replace(/mar/g, "-003-");
  tmpDate = tmpDate.replace(/apr/g, "-004-");
  tmpDate = tmpDate.replace(/may/g, "-005-");
  tmpDate = tmpDate.replace(/jun/g, "-006-");
  tmpDate = tmpDate.replace(/jul/g, "-007-");
  tmpDate = tmpDate.replace(/aug/g, "-008-");
  tmpDate = tmpDate.replace(/sep/g, "-009-");
  tmpDate = tmpDate.replace(/oct/g, "-010-");
  tmpDate = tmpDate.replace(/nov/g, "-011-");
  tmpDate = tmpDate.replace(/dec/g, "-012-");
  for (i=0;i<tmpDate.length;i++){
   tmpChar = tmpDate.charAt(i);
   if ((tmpChar<"0" || tmpChar>"9") && (tmpChar != "-")){
    tmpDate = tmpDate.replace(tmpChar,"-")
   }
  }
  while(tmpDate.indexOf("--") != -1){
   tmpDate = tmpDate.replace(/--/g,"-");
  }
  start_at = 0;
  end_at = tmpDate.length-1;
  while (tmpDate.charAt(start_at)=="-"){
   start_at++;
  }
  while (tmpDate.charAt(end_at)=="-"){
   end_at--;
  }
  if (start_at < end_at+1){
   tmpDate = tmpDate.substring(start_at,end_at+1);
  }
  else{
   tmpDate = "";
  }
  aryDate = tmpDate.split("-");
  if (aryDate.length != 3){
   return(defDate);
  }
  for (i=0;i<3;i++){
   if (parseInt(aryDate[i],10)<1){
    aryDate[i] = "1";
   }
  }
  find_tag="000";
  for (i=2;i>=0;i--){
   if (aryDate[i].length==3){
    if (aryDate[i]>="001" && aryDate[i]<="012"){
     tmpMonth = parseInt(aryDate[i],10)-1;
     switch (i){
      case 0:
       find_tag = "100";
       one_at = parseInt(aryDate[1],10);
       two_at = parseInt(aryDate[2],10);
       break;
      case 1:
       find_tag = "010";
       one_at = parseInt(aryDate[0],10);
       two_at = parseInt(aryDate[2],10);
       break;
      case 2:
       find_tag = "001";
       one_at = parseInt(aryDate[0],10);
       two_at = parseInt(aryDate[1],10);
       break;
     }
    }
   }
  }
  if (find_tag!="000"){
   one_days = this.GetMonthDays(two_at,tmpMonth);
   two_days = this.GetMonthDays(one_at,tmpMonth);
   if ((one_at>one_days)&&(two_at>two_days)){
    return(defDate);
   }
   if ((one_at<=one_days)&&(two_at>two_days)){
    tmpYear = this.GetFormatYear(two_at);
    tmpDay = one_at;
   }
   if ((one_at>one_days)&&(two_at<=two_days)){
    tmpYear = this.GetFormatYear(one_at);
    tmpDay = two_at;
   }
   if ((one_at<=one_days)&&(two_at<=two_days)){
    tmpYear = this.GetFormatYear(one_at);
    tmpDay = two_at;
    tmpDate = this.DateFormat;
    year_at = tmpDate.indexOf("<yyyy>");
    if (year_at == -1){
     year_at = tmpDate.indexOf("<yy>");
    }
    day_at = tmpDate.indexOf("<dd>");
    if (day_at == -1){
     day_at = tmpDate.indexOf("<d>");
    }
    if (year_at >= day_at){
     tmpYear = this.GetFormatYear(two_at);
     tmpDay = one_at;
    }
   }
   return(new Date(tmpYear, tmpMonth, tmpDay));
  }
  find_tag = "000";
  for (i=2;i>=0;i--){
   if (parseInt(aryDate[i],10)>31){
    tmpYear = this.GetFormatYear(parseInt(aryDate[i],10));
    switch (i){
     case 0:
     find_tag = "100";
     one_at = parseInt(aryDate[1],10);
     two_at = parseInt(aryDate[2],10);
     break;
     case 1:
     find_tag = "010";
     one_at = parseInt(aryDate[0],10);
     two_at = parseInt(aryDate[2],10);
     break;
     case 2:
     find_tag = "001";
     one_at = parseInt(aryDate[0],10);
     two_at = parseInt(aryDate[1],10);
     break;
    }
   }
  }
  if (find_tag=="000"){
   tmpDate = this.DateFormat;
   year_at = tmpDate.indexOf("<yyyy>");
   if (year_at == -1){year_at = tmpDate.indexOf("<yy>");}
   month_at = tmpDate.indexOf("<MMMMMM>");
   if (month_at == -1){month_at = tmpDate.indexOf("<MMM>");}
   if (month_at == -1){month_at = tmpDate.indexOf("<mm>");}
   if (month_at == -1){month_at = tmpDate.indexOf("<m>");}
   day_at = tmpDate.indexOf("<dd>");
   if (day_at == -1){day_at = tmpDate.indexOf("<d>");}
   if ((year_at>month_at)&&(year_at>day_at)){find_tag="001"}
   if ((year_at>month_at)&&(year_at<=day_at)){find_tag="010";}
   if ((year_at<=month_at)&&(year_at>day_at)){find_tag="010";}
   if ((year_at<=month_at)&&(year_at<=day_at)){find_tag="100";}
   switch (find_tag){
    case "100":
    tmpYear = parseInt(aryDate[0],10);
    one_at = parseInt(aryDate[1],10);
    two_at = parseInt(aryDate[2],10);
    break;
    case "010":
    one_at = parseInt(aryDate[0],10);
    tmpYear = parseInt(aryDate[1],10);
    two_at = parseInt(aryDate[2],10);
    break;
    case "001":
    one_at = parseInt(aryDate[0],10);
    two_at = parseInt(aryDate[1],10);
    tmpYear = parseInt(aryDate[2],10);
    break;
   }
   tmpYear = this.GetFormatYear(tmpYear);
  }
  if (find_tag!="000"){
   if ((one_at>12)&&(two_at>12)){
    return(defDate);
   }
   if (one_at<=12){
    if (two_at > this.GetMonthDays(tmpYear,one_at-1)){ return(new Date(tmpYear, one_at-1, this.GetMonthDays(tmpYear,one_at-1)));
   }
   if (two_at>12){
    return(new Date(tmpYear, one_at-1, two_at));
   }
  }
  if (two_at<=12){
   if (one_at > this.GetMonthDays(tmpYear,two_at-1)){
    return(new Date(tmpYear, two_at-1, this.GetMonthDays(tmpYear,two_at-1)));
   }
   if (one_at>12){
    return(new Date(tmpYear, two_at-1, one_at));
   }
  }
  if ((one_at<=12)&&(two_at<=12)){
   tmpMonth = one_at-1;
   tmpDay = two_at;
   tmpDate = this.DateFormat;
   month_at = tmpDate.indexOf("<MMMMMM>");
   if (month_at == -1){month_at = tmpDate.indexOf("<MMM>");}
   if (month_at == -1){month_at = tmpDate.indexOf("<mm>");}
   if (month_at == -1){month_at = tmpDate.indexOf("<m>");}
   day_at = tmpDate.indexOf("<dd>");
   if (day_at == -1){day_at = tmpDate.indexOf("<d>");}
   if (month_at >= day_at){
    tmpMonth = two_at-1;
    tmpDay = one_at;
   }
   return(new Date(tmpYear, tmpMonth, tmpDay));
  }
 }
}
 this.CreateYearList = function(MinYear, MaxYear){ //create year list
  var theName = this.Name;
  var theYearObject = document.all.item(theName + "_YearList");
  if (theYearObject == null){
   return;
  }
  var theYear = 0;
  var theYearHTML = "<select id=/"" + theName + "_YearList/" tabIndex=/"-1/" onChange=/"document.jsMonthView.UpdateMonthGrid(this)/" style=/"font-size: 12pt; border: 1px #666666 outset;COLOR: #000066; font-weight: bold;background-color: #F4F8FB/">";
  for (theYear = MinYear; theYear <= MaxYear; theYear++){
   theYearHTML += "<option value=/"" + theYear.toString() + "/">" + theYear.toString() + "</option>";
  }
  theYearHTML += "</select>";
  theYearObject.outerHTML = theYearHTML;
 }
 this.CreateMonthList = function( ){ //create month list
  var theName = this.Name; var theMonthObject = document.all.item(theName + "_MonthList");
  if (theMonthObject == null){
   return;
  }
  var theMonth = 0;
  var theMonthHTML = "<select id=/"" + theName + "_MonthList/" style=/"font-size: 12pt; border: 1px #666666 outset;COLOR: #000066; font-weight: bold;background-color: #F4F8FB/" tabIndex=/"-1/" onChange=/"document.jsMonthView.UpdateMonthGrid(this)/">";
  for (theMonth = 0; theMonth < 12; theMonth++){
   theMonthHTML += "<option value=/"" + theMonth.toString() + "/">" + this.MonthName[theMonth] + "</option>";
  }
  theMonthHTML +="</select>";
  theMonthObject.outerHTML = theMonthHTML;
 }
 this.setDayList = function(theYear, theMonth, theDay){ //set the month view show a date
  var theName = this.Name;
  var theDayObject = document.all.item(theName + "_DayList");
  if (theDayObject == null){
   return;
  }
  theDayObject.value = theDay.toString();
  var theFirstDay = new Date(theYear, theMonth, 1);
  var theCurrentDate = new Date();
  var theWeek = theFirstDay.getDay();
  if (theWeek == 0){
   theWeek = 7;
  }
  var theLeftDay = 0;
  if (theMonth == 0){
   theLeftDay = 31;
  }else{
   theLeftDay = this.GetMonthDays(theYear, theMonth - 1);
  }
  var theRightDay = this.GetMonthDays(theYear, theMonth);
  var theCurrentDay = theLeftDay - theWeek + 1;
  var offsetMonth = -1; //the month is previous month
  var theColor = this.InvalidColor;
  var theBgColor = this.UnselectBgColor;
  var theBdColor = theBgColor;
  var WeekId = 0
  var DayId = 0;
  var theStyle = "";
  var theDayHTML = "<table width=/"100%/" height=/"100%/" border='0' cellpadding='0' cellspacing='1' bgcolor='#000000'>";
  theDayHTML += " <tr style=/"" + this.TitleStyle + "/">";
  for (DayId = 0; DayId < 7; DayId++){
   theDayHTML += " <td width=/"10%/" height='30' valign='middle' background='images/headerbg.gif' class='column_title_black'>" + this.WeekName[DayId] + "</td>";
  }
  theDayHTML += " </tr>";
  for (WeekId = 0; WeekId < 6; WeekId++){
   theDayHTML += " <tr style=/"" + this.DayStyle + "/">";
   for (DayId = 0; DayId < 7; DayId++){
//    alert('theCurrentDay:'+theCurrentDay+'     theLeftDay:'+theLeftDay+'     theRightDay:'+theRightDay+'     WeekId:'+WeekId);
    if ((theCurrentDay > theLeftDay) && (WeekId < 3)){
     offsetMonth++; //the month is current month;
     theCurrentDay = 1;
    }
    if ((theCurrentDay > theRightDay) && (WeekId > 3)){
     offsetMonth++; //the month is next month;
     theCurrentDay = 1;
    }
    switch (offsetMonth){
     case -1:
      theColor = this.InvalidColor;
      break;
     case 1:
      theColor = this.InvalidColor;
      break;
     case 0:
      if ((DayId==0)||(DayId==6)){
       theColor = this.WeekendColor;
      }
      else{
       theColor = this.ValidColor;
      }
     break;
    }
    if ((DayId==0)||(DayId==6)){
     theBgColor = this.WeekendBgColor;
    }else{
     theBgColor = this.UnselectBgColor;
    }
    theBdColor = this.DayBdColor;
    if ((theCurrentDay == theDay) && (offsetMonth == 0)){
     theColor = this.SelectedColor;
     theBgColor = this.SelectedBgColor;
     theBdColor = theBgColor;
    }
    if ((theYear == theCurrentDate.getFullYear()) && (theMonth == theCurrentDate.getMonth()) && (theCurrentDay == theCurrentDate.getDate()) && (offsetMonth == 0)){
     theBdColor = this.TodayBdColor;
    }
    theStyle = "border:" + this.DayBdWidth + "px solid " + theBdColor + "; color:" + theColor + "; background-color:" + theBgColor + ";";
    theDayHTML += " <td style=/"" + theStyle + "/" height='40'>";
    if ((((this.GetMonthDays(theYear, theMonth)-theCurrentDay)>10) && (WeekId < 3))||((((this.GetMonthDays(theYear, theMonth)-theCurrentDay)<=17)) && (WeekId >= 3))){//测试
     theDayHTML += "<a href='arrange1.asp?year="+theYear.toString()+"&month="+this.MonthName[theMonth].replace('月','')+"&day="+theCurrentDay.toString()+"' title='查看日程安排' class='arrange'>"
     theDayHTML += theCurrentDay.toString();
     theDayHTML += " </a>";
    }
    theDayHTML += " </td>";
    theCurrentDay++;
   }
   theDayHTML += " </tr>";
  }
  theDayHTML += " <tr style=/"" + this.FooterStyle + "/" onMouseDown=/"document.jsMonthView.CreateMonthGrid(" + theCurrentDate.getFullYear().toString() + ", " + theCurrentDate.getMonth().toString() + ", " + theCurrentDate.getDate().toString() + ");/">";
  theStyle = "border:" + this.DayBdWidth + "px solid " + this.TodayBdColor + ";";
  theDayHTML += " <td colspan=/"7/" height='50' align='center'><font size='5'>" + this.TodayTitle + " " + this.SetDateFormat(theCurrentDate.getFullYear(), theCurrentDate.getMonth(), theCurrentDate.getDate()) +" </font></td>";
  theDayHTML += " </tr>";
  theDayHTML += " </table>";
  var theMonthGrid = document.all.item(theName + "_MonthGrid");
  theMonthGrid.innerHTML = theDayHTML;
 }
 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 "_goNextYear": //go next month button
   theObject.disabled = true;
   this.CreateMonthGrid(parseInt(theYearObject.value, 10) + 1, parseInt(theMonthObject.value, 10), parseInt(theDayObject.value, 10));
   theObject.disabled = false;
   break;
  case "_goPreviousYear": //go next month button
   theObject.disabled = true;
   this.CreateMonthGrid(parseInt(theYearObject.value, 10) - 1, parseInt(theMonthObject.value, 10), 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 + "_goNextYear"){
   return;
   }
   if (tmpObject.id == theName + "_goPreviousYear"){
   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='600' height='300' 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 colspan='3' width='100%'>";
  theDivHTML += " <input type=/"button/" tabIndex=/"-1/" style=/"" + this.MonthBtStyle + "/" id=/"" + theName + "_goPreviousYear/" value=/"" + this.PreviousMonthText + "/" onClick=/"document.jsMonthView.UpdateMonthGrid(this)/" title='上一年' class='button'>";
  theDivHTML += " <select id=/"" + theName + "_YearList/">";
  theDivHTML += " </select>";
  theDivHTML += " <input type=/"button/" tabIndex=/"-1/" style=/"" + this.MonthBtStyle + "/" id=/"" + theName + "_goNextYear/" value=/"" + this.NextMonthText + "/" onClick=/"document.jsMonthView.UpdateMonthGrid(this)/"  title='下一年' class='button'><span style='color: #004080;font-weight: bold;font-size: 18px;'>&nbsp;年</span>";
  theDivHTML += " <input type=/"button/" tabIndex=/"-1/" style=/"" + this.MonthBtStyle + "/" id=/"" + theName + "_goPreviousMonth/" value=/"" + this.PreviousMonthText + "/" onClick=/"document.jsMonthView.UpdateMonthGrid(this)/" title='上一月' class='button'>";
  theDivHTML += " <select id=/"" + theName + "_MonthList/">";
  theDivHTML += " </select>";
  theDivHTML += " <input type=/"button/" tabIndex=/"-1/" style=/"" + this.MonthBtStyle + "/" id=/"" + theName + "_goNextMonth/" value=/"" + this.NextMonthText + "/" onClick=/"document.jsMonthView.UpdateMonthGrid(this)/"  title='下一月' class='button'><span style='color: #004080;font-weight: bold;font-size: 18px;'>&nbsp;月</span>";
  theDivHTML += " <input type=/"hidden/" id=/"" + theName + "_DayList/" value=/"1/">";
  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)+100;
  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);
 //insert your code, change the month view propertiy
 //example:
 // document.jsMonthView.DateFormat = "<MMM> <d>,<yyyy>";
 document.jsMonthView.InitialMonthView();
 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>

 

这是一个网友的问题，要求改成只显示当前月份的天数，多余的不显示。已经改完了，发上来与大家分享

itzhiren
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你用JavaScript制作小日历
小院里的霍大侠
12-07 1733
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
js简单月历
江湖再见
07-09 2765
HTML 1JAN 2FER 3MAR 4APR 5MAY 6JUN 7JUL 8SUG 9SEP 10OCT 11NOV 12DEC
用 JavaScript 编写日历
allway2的博客
05-27 4520
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
h5日历组件制作
醉逍遥neo的博客
08-26 2802
在自己实现之前会觉得日期的展示这块不好处理，而实现过后会发现这块的处理逻辑很有通用性，无论是pc端还是移动端、vue栈还是react，都能套用同样的处理方式，其他的交互和自定义展示就没啥难度了，根据业务需要自己定制就行。日期列表参照 antd-mobile 的展示，固定6行，共42项，共用一个容器，和星期栏类似，flex布局，子元素占总宽度的1/7，溢出换行（flex-wrap: wrap）。以上数据字段可以随意拓展，根据你的需要来对日历展示不同的状态、不同标记等，或者对日历点击事件做自定义的操作。...
JS实现日历
热门推荐
仄言的博客
12-13 1万+
JS 实现日历 最近在学JS，分享一些使用js实现的网页，后续还会更一些关于js的例子，话不多说，直接附上源码，源码上有注释。 js 实现日历主要 运用Date函数,这里就不在多讲Date的用法，因为并不是很难，所以想要了解的朋友可以去网上自行搜索，有很多的讲解！ &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&a
如何向日历中添加日程
acheding的博客
04-06 1742
通过element日历自带的插槽添加日期，使用Vue的计算属性来同步更新有日程的日期，伪元素标记，popover显示日程。
H5新特性--日历插件的使用案例
小白小白从不日别的博客
07-18 2734
1.引入日历插件的步骤： 引入schedule.css文件，放在页面的起始位置 引入alicdn字体文件，设置左右切换按钮的样式 <linkrel="stylesheet"href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css"> 引入schedule.js文件 2.使用日历插件： 在html页面中设置一个div，作为日历插件的容器 <divclass=...
一个用JS写的简日历
06-17
一个用JS写的简日历，可任意改变颜色，简单实用。
用 js + html 实现一个网页版日历
07-02
使用js + html 实现的简单的网页版日历，顶部默认会显示当前日期和时间，时间会精确到秒，并且时间会实时刷新，日历UI符合主流日历的样式，可以选择年，月，日查看每个月份的每一天对应星期几，默认显示当前日期所在...
推荐一个小巧的JS日历
10-30
推荐一个小巧的JS日历
用js的一个日历用js的一个日历
07-30
用js的一个日历选择框，用js的一个日历选择框用js的一个日历选择框用js的一个日历选择框
一个js写的日历控件
07-01
为了酒店选择入住日期和离店日期写的一个控件
用JS写了个日历，类似BLOG那种
03-05
写了个简单的并做了些修改 博文链接：https://feigme.iteye.com/blog/102822
H5中使用JS实现简易日历
YZi_Angel的专栏
08-02 5972
1、this：当前发生事件的元素2、value：改变标签里的内容（给input使用） innerHTML：也改变标签里的内容（但是针对div、span等标签）3、数组的定义与使用 -定义：arr=[1,2,3] -使用：arr[0]4、字符串连接 -作用：连接两个字符串 -问题：连接中的优先级（从前往后相加）<!DOCTYPE html> <html> <he
js之日历
一只想要挣钱的猪的博客
07-27 2745
js之日历 本文通过基础js来实现日历，如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } #calendar { width: 210px; margin: 100px auto;
用原生javascript制作日历
rhrh_fd的博客
04-15 1815
用原生js制作日历 1，先在html内容写好日历的样式框架 <div class="container"> <header> <div class="left">上个月</div> <div class="center"></div> ...
JavaScript制作日历
weixin_50821119的博客
03-06 3132
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
js实现日历 完整版
最新发布
bobringtheboys的博客
10-13 702
【代码】js实现日历 完整版。
js写简单日历
Myd
11-22 3925
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
用JavaScript写一个日历
05-23
好的，以下是用 JavaScript 实现的简单日历： ```html <!DOCTYPE html> 日历 body { font-family: Arial, sans-serif; margin: 0; padding: 0; } table { border-collapse: collapse; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值