求一JAVASCRITP日期选择控件，有高手愿意帮忙吗

Question

网上calenda的例子很多，自己弄个下来改改就是了。

Answer 1

有点多 分几次发给你
-------------------------------------------------------------------
<script>
//======================================================================
//         CUDIGITAL CUCalendar Script 
//         Version 1.0 Code by EDISON1024.([email protected])
//         Copyright(C)2004-2008 CUDIGITAL Co,ltd. All Rights Reserved.
//=======================================================================if(typeof(cucalendar_state) != "object")
var cucalendar_state = new Object();
function CUCalendar(calendarID)
{
cucalendar_state[calendarID] = this;
this.Id = calendarID;
this.MinYear = 1900; 
this.MaxYear = 2100; 
this.Width = 170; 
this.Height = 200; 
this.DateFormat = "<yyyy>-<mm>-<dd>";
this.Source = null;
this.Target = null;

this.UnselectBgColor = ""; 
this.MainColor = "#FF0000";
this.Shadow = "#666666";
this.Alpha = "100";
this.SelectedColor = "#FFFFFF"; 
this.DayBdWidth = "1"; 
this.DayBdColor = this.UnselectBgColor; 
this.TodayBdColor = "#000000"; 
this.InvalidColor = "#808080";
this.ValidColor = "#000099";
this.WeekendBgColor = this.UnselectBgColor;
this.WeekendColor = "#006600"; this.YearListStyle = "font-size:12px; font-family:宋体;"; 
this.MonthListStyle = "font-size:12px; font-family:宋体;"; 
this.TitleStyle = "cursor:default; height:24px; color:#000000; background-color:" + this.UnselectBgColor + "; font-size:12px;  text-align:center; vertical-align:bottom;";  
this.FooterOverStyle = "height:20px; cursor:hand; color:#000000; background-color:#999999; font-size:12px; font-family:Verdana; text-align:center; vertical-align:middle;"; 
this.FooterStyle = "height:20px; cursor:hand; color:#FFFFFF; background-color:#333333; font-size:12px; font-family:Verdana; text-align:center; vertical-align:middle;";

this.TodayTitle = "今天：";

this.LineBgStyle = "height:6px; background-color:" + this.UnselectBgColor + "; text-align:center; vertical-align:middle;";
this.LineStyle = "width:94%; height:1px; background-color:#000000;"; 
this.DayStyle = "cursor:hand; font-size:12px; font-family:Verdana; text-align:center; vertical-align:middle;"; 
this.OverDayStyle = "this.style.textDecoration='underline';"; 
this.OutDayStyle = "this.style.textDecoration='none';"; 

this.MonthName = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
this.WeekName = new Array("日", "一", "二", "三", "四", "五", "六"); 

this.boolCalendarPadExist = false;

this.CreateCalendarPad = function()
{
this.boolCalendarPadExist = true;
var theValue = this.Source.value; 
var theCurrentDate = new Date(this.GetTextDate(theValue)); 
if (isNaN(theCurrentDate))
{ 
theCurrentDate = new Date(); 
}
var CalendarPadHTML = "";
CalendarPadHTML += " <div id=\"" + this.Id + "_CalendarPad\" style=\"Z-INDEX: 201; POSITION: absolute;top:-100;left:-100;"; 
if(this.Shadow != "")
{
CalendarPadHTML += "FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=" + this.Shadow + ",strength=3);";
}
if(this.Alpha != "100" && this.Alpha != "")
{
CalendarPadHTML += "FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=" + this.Alpha + ");";
}
CalendarPadHTML += " \">";
CalendarPadHTML += " <iframe frameborder=0 width=\"" + (this.Width+2).toString() + "\" height=\"" + (this.Height+2).toString() + "\"></iframe>";
CalendarPadHTML += " <div style=\"Z-INDEX:202;position:absolute;top:0;left:0;\"><table width=\"" + this.Width.toString() + "\" height=\"" + this.Height.toString() + "\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td align=\"center\" style=\"font-size:24px;font-family:Arial Black;color:#E6E6E6\">CUDIGITAL</td></tr></table></div>";
CalendarPadHTML += " <div style=\"Z-INDEX:203;position:absolute;top:0;left:0;border:1px solid #000000;\" onclick=\"CUCalendar_getCalendarById('" + this.Id + "').Source.select()\">";
CalendarPadHTML += " <table width=\"" + this.Width.toString() + "\" height=\"" + this.Height.toString() + "\" cellpadding=\"0\" cellspacing=\"0\">"; 
CalendarPadHTML += " <tr>"; 
CalendarPadHTML += " <td align=\"center\" valign=\"top\">"; 
CalendarPadHTML += " <table width=\"100%\" height=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"; 
CalendarPadHTML += " <tr align=\"center\" style=\"height:30px; background-color:" + this.MainColor + ";\">"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <table border=\"0\" cellspacing=\"0\" cellpadding=\"3\">"; 
CalendarPadHTML += " <tr>"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <input type=\"button\" tabIndex=\"-1\" style=\"font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;border:1px solid #EEEEEE;color:#EEEEEE;background-color:" + this.MainColor + ";\" id=\"" + this.Id + "_goPreviousMonth\" value=\"3\" onClick=\"CUCalendar_getCalendarById('" + this.Id + "').UpdateCalendarGrid(this)\" onmouseover=\"this.style.cssText='border:1px solid #FFFFFF;color:#FFFFFF;font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;background-color:" + this.MainColor + ";'\" onmouseout=\"this.style.cssText='font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;border:1px solid #EEEEEE;color:#EEEEEE;background-color:" + this.MainColor + ";'\">"; 
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <select id=\"" + this.Id + "_YearList\">"; 
CalendarPadHTML += " </select>"; 
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <select id=\"" + this.Id + "_MonthList\">"; 
CalendarPadHTML += " </select>"; 
CalendarPadHTML += " <input type=\"hidden\" id=\"" + this.Id + "_DayList\" value=\"1\">"; 
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <input type=\"button\" tabIndex=\"-1\" style=\"font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;border:1px solid #EEEEEE;color:#EEEEEE;background-color:" + this.MainColor + ";\" id=\"" + this.Id + "_goNextMonth\" value=\"4\" onClick=\"CUCalendar_getCalendarById('" + this.Id + "').UpdateCalendarGrid(this)\" onmouseover=\"this.style.cssText='border:1px solid #FFFFFF;color:#FFFFFF;font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;background-color:" + this.MainColor + ";'\" onmouseout=\"this.style.cssText='font-family:Marlett; CURSOR:hand; font-size:12px;width:14px;height:18px;border:1px solid #EEEEEE;color:#EEEEEE;background-color:" + this.MainColor + ";'\">";
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " </tr>"; 
CalendarPadHTML += " </table>";

Answer 2

CalendarPadHTML += " </td>"; 
CalendarPadHTML += " </tr>"; 
CalendarPadHTML += " <tr>"; 
CalendarPadHTML += " <td align=\"center\">"; 
CalendarPadHTML += " <div id=\"" + this.Id + "_CalendarGrid\"></div>"; 
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " </tr>"; 
CalendarPadHTML += " </table>"; 
CalendarPadHTML += " </td>"; 
CalendarPadHTML += " </tr>"; 
CalendarPadHTML += " </table>"; 
CalendarPadHTML += "</div>";
CalendarPadHTML += "</div>"; 
document.body.insertAdjacentHTML("beforeEnd", CalendarPadHTML);
this.CreateYearList(this.MinYear, this.MaxYear); 
this.CreateMonthList();
theCalendarPadObject = document.all.item(this.Id + "_CalendarPad"); 
theCalendarPadObject.style.position = "absolute"; 
theCalendarPadObject.style.posLeft = this.GetCalendarPadLeft(this.Source); 
theCalendarPadObject.style.posTop = this.GetCalendarPadTop(this.Source); 
this.CreateCalendarGrid(theCurrentDate.getFullYear(), theCurrentDate.getMonth(), theCurrentDate.getDate()); 
} 

//创建年下拉菜单
this.CreateYearList = function(MinYear, MaxYear)
{
var theYearObject = document.all.item(this.Id + "_YearList"); 
if (theYearObject == null)
{ 
return; 
} 
var theYear = 0; 
var theYearHTML = "<select id=\"" + this.Id + "_YearList\"  style=\"" + this.YearListStyle + "\"  tabIndex=\"-1\" onChange=\"CUCalendar_getCalendarById('" + this.Id + "').UpdateCalendarGrid(this)\">"; 
for (theYear = MinYear; theYear <= MaxYear; theYear++)
{ 
theYearHTML += "<option value=\"" + theYear.toString() + "\">" + theYear.toString() + "年</option>"; 
} 
theYearHTML += "</select>"; 
theYearObject.outerHTML = theYearHTML; 
}  //创建月下拉菜单
this.CreateMonthList = function( )
{
var theMonthObject = document.all.item(this.Id + "_MonthList"); 
if (theMonthObject == null)
{ 
return; 
} 
var theMonth = 0; 
var theMonthHTML = "<select id=\"" + this.Id + "_MonthList\" tabIndex=\"-1\" style=\"" + this.MonthListStyle + "\"  onChange=\"CUCalendar_getCalendarById('" + this.Id + "').UpdateCalendarGrid(this)\">"; 
for (theMonth = 0; theMonth < 12; theMonth++)
{ 
theMonthHTML += "<option value=\"" + theMonth.toString() + "\">" + this.MonthName[theMonth] + "</option>"; 
} 
theMonthHTML +="</select>"; 
theMonthObject.outerHTML = theMonthHTML; 
} 

this.CreateCalendarGrid = function(theYear, theMonth, theDay)
{ 
var theTextObject = this.Source; 
if (theTextObject == null)
{ 
return; 
}
var theYearObject = document.all.item(this.Id + "_YearList"); 
var theMonthObject = document.all.item(this.Id + "_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; 
}

Answer 3

} 
theYearObject.value = tmpYear; 
theMonthObject.value = tmpMonth; 
this.setDayList(tmpYear, tmpMonth, tmpDay);  
theTextObject.value = this.SetDateFormat(tmpYear, tmpMonth, tmpDay); 
theTextObject.select(); 
} 

/****** setDayList Start ******/
this.setDayList = function(theYear, theMonth, theDay)
{ 
var theDayObject = document.all.item(this.Id + "_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; 
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\" cellspacing=\"1\" cellpadding=\"0\">"; 
theDayHTML += " <tr style=\"cursor:default; height:24px; color:#000000; font-size:12px;  text-align:center; vertical-align:bottom;\">"; 
for (DayId = 0; DayId < 7; DayId++)
{ 
theDayHTML += " <td>" + this.WeekName[DayId] + "</td>"; 
} 
theDayHTML += " </tr>"; 
theDayHTML += " <tr>"; 
theDayHTML += " <td colspan=\"7\" style=\"" + this.LineBgStyle + "\">"; 
theDayHTML += " <table style=\"" + this.LineStyle + "\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td></td></tr></table>"; 
theDayHTML += " </td>";
theDayHTML += " </td>"; 
theDayHTML += " </tr>"; 
for (WeekId = 0; WeekId < 6; WeekId++)
{ 
theDayHTML += " <tr  style=\"" + this.DayStyle + "\">"; 
for (DayId = 0; DayId < 7; DayId++)
{ 
if ((theCurrentDay > theLeftDay) && (WeekId < 3))
{ 
offsetMonth++; 
theCurrentDay = 1; 
} 
if ((theCurrentDay > theRightDay) && (WeekId > 3))
{ 
offsetMonth++; 
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))
{

Answer 4

没贴完， 太多了 。
看这儿好了 http://blog.csdn.net/daizhenbest/archive/2007/04/12/1562257.aspx

Answer 5

一般都是在网上找一些javascript的源代码贴上去就完事了
给个网址：
http://www.dabaoku.com/sucai/

Answer 6

jscalender是一个js日期插件，加上就可以用了。