javascript做的日历，完全对象化，望高手提出改进意见。（1/3，将3部分拼成一个html文件
<HTML>
<HEAD>
<TITLE>jsMonthView Demo</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<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
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 (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 = 300; //the month view main body's width
this.Height = 200; //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 = "2"; //the day unit border width, unit is px
this.DayBdColor = this.UnselectBgColor; //the day unit border color,default is this.UnselectBgColor
this.TodayBdColor = "#FF0000"; //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:Verdana;"; //the year list's style
this.MonthListStyle = "font-size:12px; font-family:Verdana;"; //the month list's style
this.MonthName = new Array(); //month name list, font is include this.MonthListStyle
this.MonthName[0] = "January";
this.MonthName[1] = "February";
this.MonthName[2] = "March";
this.MonthName[3] = "April";
this.MonthName[4] = "May";
this.MonthName[5] = "June";
this.MonthName[6] = "July";
this.MonthName[7] = "August";
this.MonthName[8] = "September";
this.MonthName[9] = "October";
this.MonthName[10] = "November";
this.MonthName[11] = "December";
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] = "Sun";
this.WeekName[1] = "Mon";
this.WeekName[2] = "Tue";
this.WeekName[3] = "Wed";
this.WeekName[4] = "Thu";
this.WeekName[5] = "Fri";
this.WeekName[6] = "Sat";
this.FooterStyle = "cursor:hand; color:#000000; background-color:" + this.UnselectBgColor + "; font-size:12px; font-family:Verdana; text-align:left; vertical-align:middle;"; //the month footer area's style
this.TodayTitle = "Today:"; //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);
}
<HEAD>
<TITLE>jsMonthView Demo</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<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
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 (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 = 300; //the month view main body's width
this.Height = 200; //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 = "2"; //the day unit border width, unit is px
this.DayBdColor = this.UnselectBgColor; //the day unit border color,default is this.UnselectBgColor
this.TodayBdColor = "#FF0000"; //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:Verdana;"; //the year list's style
this.MonthListStyle = "font-size:12px; font-family:Verdana;"; //the month list's style
this.MonthName = new Array(); //month name list, font is include this.MonthListStyle
this.MonthName[0] = "January";
this.MonthName[1] = "February";
this.MonthName[2] = "March";
this.MonthName[3] = "April";
this.MonthName[4] = "May";
this.MonthName[5] = "June";
this.MonthName[6] = "July";
this.MonthName[7] = "August";
this.MonthName[8] = "September";
this.MonthName[9] = "October";
this.MonthName[10] = "November";
this.MonthName[11] = "December";
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] = "Sun";
this.WeekName[1] = "Mon";
this.WeekName[2] = "Tue";
this.WeekName[3] = "Wed";
this.WeekName[4] = "Thu";
this.WeekName[5] = "Fri";
this.WeekName[6] = "Sat";
this.FooterStyle = "cursor:hand; color:#000000; background-color:" + this.UnselectBgColor + "; font-size:12px; font-family:Verdana; text-align:left; vertical-align:middle;"; //the month footer area's style
this.TodayTitle = "Today:"; //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);
}
- 没有相关文章
- 没有评论
