(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 + "\" onMouseOver=\"" + this.OverDayStyle + "\" onMouseOut=\"" + this.OutDayStyle + "\" onMouseDown=\"document.jsMonthView.CreateMonthGrid(" + theYear.toString() + ", " + (theMonth + offsetMonth).toString() + ", " + theCurrentDay.toString() + ")\">";
theDayHTML += theCurrentDay.toString();
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 style=\"" + theStyle + "\"><br></td>";
theDayHTML += " <td colspan=\"6\"> " + this.TodayTitle + " " + this.SetDateFormat(theCurrentDate.getFullYear(), theCurrentDate.getMonth(), theCurrentDate.getDate()) + "</td>";
theDayHTML += " </tr>";
theDayHTML += " ";
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 "_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 + "_YearList\">";
theDivHTML += " </select>";
theDivHTML += " </td>";
theDivHTML += " <td>";
theDivHTML += " <select id=\"" + theName + "_MonthList\">";
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 += " ";
theDivHTML += " </td>";
theDivHTML += " </tr>";
theDivHTML += " ";
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);
//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>
关键词：“javascript做的日历”改进版