请曹晓刚来回答，谢谢，关于javascript的web日期控件 ( 积分: 100 )

我现在用jsp做一个web系统，想让用户录入日期的时候可以和delphi那样有一个选择日期的控件，可以下拉选取的，我看你以前用过，还告诉了一个网址，说用javascript写的，可是那个网址我打不开，能否告诉我现在的网址，可否做一个demo给我，在此十分感谢！

我现在用jsp做一个web系统，想让用户录入日期的时候可以和delphi那样有一个选择日期的控件，可以下拉选取的，我看你以前用过，还告诉了一个网址，说用javascript写的，可是那个网址我打不开，能否告诉我现在的网址，可否做一个demo给我，在此十分感谢！

网上大把的open source

http://51windows.net/myjs/里就有，你自己找一个你想要的样子的来用吧。

/******************************************************/
/* 功 能：日期控件 */
/******************************************************/
function atCalendarControl(){
var calendar=this;
this.calendarPad=null;
this.prevMonth=null;
this.nextMonth=null;
this.prevYear=null;
this.nextYear=null;
this.goToday=null;
this.calendarClose=null;
this.calendarAbout=null;
this.head=null;
this.body=null;
this.today=[];
this.currentDate=[];
this.sltDate;
this.target;
this.source;
/************** 加入日历底板及阴影 *********************/
this.addCalendarPad=function(){
do
cument.write("<div id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:167;display:none;'>"
do
cument.write("<
iframe frameborder=0 height=168 width=255></iframe>"
do
cument.write("<div style='position:absolute;top:4;left:4;width:248;height:164;background-color:#336699;'></div>"
do
cument.write("</div>"
calendar.calendarPad=document.all.divCalendarpad;
}
/************** 加入日历面板 *********************/
this.addCalendarBoard=function(){
var BOARD=this;
var divBoard=document.createElement("div"
calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";
var tbBoard=document.createElement("table"
divBoard.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";
tbBoard.cellPadding=0;
tbBoard.cellSpacing=1;
tbBoard.bgColor="#333333";
/************** 设置各功能按钮的功能 *********************/
/*********** Calendar About Button ***************/
trRow = tbBoard.insertRow(0);
calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center"
calendar.calendarAbout.onclick=function(){calendar.about();}
/*********** Calendar Head ***************/
tbCell=trRow.insertCell(1);
tbCell.colSpan=5;
tbCell.bgColor="#99CCFF";
tbCell.align="center";
tbCell.style.cssText = "cursor:default";
calendar.head=tbCell;
/*********** Calendar Close Button ***************/
tbCell=trRow.insertCell(2);
calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center"
calendar.calendarClose.title="关闭";
calendar.calendarClose.onclick=function(){calendar.hide();}
/*********** Calendar PrevYear Button ***************/
trRow = tbBoard.insertRow(1);
calendar.prevYear = calendar.insertTbCell(trRow,0,"<<","center"
calendar.prevYear.title="上一年";
calendar.prevYear.onmousedown=function(){
calendar.currentDate[0]--;
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar PrevMonth Button ***************/
calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center"
calendar.prevMonth.title="上一月";
calendar.prevMonth.onmousedown=function(){
calendar.currentDate[1]--;
if(calendar.currentDate[1]==0){
calendar.currentDate[1]=12;
calendar.currentDate[0]--;
}
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar Today Button ***************/
calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
calendar.goToday.title="选择今天";
calendar.goToday.onclick=function(){
calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
calendar.target.value=calendar.sltDate;
calendar.hide();
//calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
}
/*********** Calendar NextMonth Button ***************/
calendar.nextMonth = calendar.insertTbCell(trRow,3,">","center"
calendar.nextMonth.title="下一";
calendar.nextMonth.onmousedown=function(){
calendar.currentDate[1]++;
if(calendar.currentDate[1]==13){
calendar.currentDate[1]=1;
calendar.currentDate[0]++;
}
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar NextYear Button ***************/
calendar.nextYear = calendar.insertTbCell(trRow,4,">>","center"
calendar.nextYear.title="下一年";
calendar.nextYear.onmousedown=function(){
calendar.currentDate[0]++;
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
trRow = tbBoard.insertRow(2);
var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六"
for (var i = 0;
i <
7;
i++) {
tbCell=trRow.insertCell(i)
tbCell.innerText=cnDateName;
tbCell.align="center";
tbCell.width=35;
tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";
}
/*********** Calendar Body ***************/
trRow = tbBoard.insertRow(3);
tbCell=trRow.insertCell(0);
tbCell.colSpan=7;
tbCell.height=97;
tbCell.vAlign="top";
tbCell.bgColor="#F0F0F0";
var tbBody=document.createElement("table"
tbCell.insertAdjacentElement("beforeEnd",tbBody);
tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
tbBody.cellPadding=0;
tbBody.cellSpacing=1;
calendar.body=tbBody;
}
/************** 加入功能按钮公共样式 *********************/
this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
var tbCell=trRow.insertCell(cellIndex);
if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;
var btnCell=document.createElement("button"
tbCell.insertAdjacentElement("beforeEnd",btnCell);
btnCell.value=TXT;
btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
btnCell.onmouseover=function(){
btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
}
btnCell.onmouseout=function(){
btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
}
// btnCell.onmousedown=function(){
// btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";
// }
btnCell.onmouseup=function(){
btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
}
btnCell.onclick=function(){
btnCell.blur();
}
return btnCell;
}
this.setDefaultDate=function(){
var dftDate=new Date();
calendar.today[0]=dftDate.getYear();
calendar.today[1]=dftDate.getMonth()+1;
calendar.today[2]=dftDate.getDate();
}
/****************** Show Calendar *********************/
this.show=function(targetObject,defaultDate,sourceObject){
if(targetObject==undefined) {
alert("未设置目标对像. /n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);/n/n目标对像:接受日期返回值的对像./n默认日期:格式为/"yyyy-mm-dd/",缺省为当日日期./n点击对像:点击这个对像弹出calendar,默认为目标对像./n"
return false;
}
else
calendar.target=targetObject;
if(sourceObject==undefined) calendar.source=calendar.target;
else
calendar.source=sourceObject;
var firstDay;
var Cells=new Array();
if(defaultDate==undefined || defaultDate=="&quot{
var theDate=new Array();
calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
theDate[0]=calendar.today[0];
theDate[1]=calendar.today[1];
theDate[2]=calendar.today[2];
}
else
{
var reg=/^/d{4}-/d{1,2}-/d{2}$/
if(!defaultDate.match(reg)){
alert("默认日期的格式不正确/n/n默认日期可接受格式为:'yyyy-mm-dd'"
return;
}
var theDate=defaultDate.split("-"
calendar.head.innerText = defaultDate;
}
calendar.currentDate[0]=theDate[0];
calendar.currentDate[1]=theDate[1];
calendar.currentDate[2]=theDate[2];
theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
//calendar.setEventKey();
calendar.calendarPad.style.display="";
var theRows = Math.ceil((theMonthLen)/7);
//清除旧的日历;
while (calendar.body.rows.length >
0) {
calendar.body.deleteRow(0)
}
//建立新的日历;
var n=0;day=0;
for(i=0;i<theRows;i++){
theRow=calendar.body.insertRow(i);
for(j=0;j<7;j++){
n++;
if(n>theFirstDay &&
n<=theMonthLen){
day=n-theFirstDay;
calendar.insertBodyCell(theRow,j,day);
}
else
{
var theCell=theRow.insertCell(j);
theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
}
}
}
//****************调整日历位置**************//
var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){
var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
}
else
{
var calTop=offsetPos.y+calendar.source.offsetHeight;
}
if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
var calLeft=offsetPos.x;
}
else
{
var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
}
//alert(offsetPos.x);
calendar.calendarPad.style.pixelLeft=calLeft;
calendar.calendarPad.style.pixelTop=calTop;
}
/****************** 计算对像的位置 *************************/
this.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
//************* 插入日期单元格 **************/
this.insertBodyCell=function(theRow,j,day,targetObject){
var theCell=theRow.insertCell(j);
if(j==0) var theBgColor="#FF9999";
else
var theBgColor="#FFFFFF";
if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
if(day==calendar.today[2]) var theBgColor="#99FFCC";
theCell.bgColor=theBgColor;
theCell.innerText=day;
theCell.align="center";
theCell.width=35;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
theCell.onmouseover=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 outset;cursor:hand;";
}
theCell.onmouseout=function(){
theCell.bgColor=theBgColor;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
}
theCell.onmousedown=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 inset;cursor:hand;";
}
theCell.onclick=function(){
if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
if(day.toString().length<2) day="0"+day;
calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
calendar.target.value=calendar.sltDate;
calendar.hide();
}
}
/************** 取得月份的第一天为星期几 *********************/
this.getFirstDay=function(theYear, theMonth){
var firstDate = new Date(theYear,theMonth-1,1);
return firstDate.getDay();
}
/************** 取得月份共有几天 *********************/
this.getMonthLen=function(theYear, theMonth) {
theMonth--;
var oneDay = 1000 * 60 * 60 * 24;
var thisMonth = new Date(theYear, theMonth, 1);
var nextMonth = new Date(theYear, theMonth + 1, 1);
var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
return len;
}
/************** 隐藏日历 *********************/
this.hide=function(){
//calendar.clearEventKey();
calendar.calendarPad.style.display="none";
}
/************** 从这里开始 *********************/
this.setup=function(defaultDate){
calendar.addCalendarPad();
calendar.addCalendarBoard();
calendar.setDefaultDate();
}
/************** 关于AgetimeCalendar *********************/
this.about=function(){
/*//alert("Agetime Calendar V1.0/n/nwww.agetime.com/n"
popLeft = calendar.calendarPad.style.pixelLeft+4;
popTop = calendar.calendarPad.style.pixelTop+25;
var popup = window.createPopup();
var popupBody = popup.document.body;
popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";
popHtml+="版本: v1.0<BR>日期: 2004-03-13";
popupBody.innerHTML=popHtml;
popup.show(popLeft,popTop,240,136,document.body);
*/
var strAbout = "About AgetimeCalendar/n/n";
strAbout+="-/t: 关于/n";
strAbout+="x/t: 隐藏/n";
strAbout+="<</t: 上一年/n";
strAbout+="</t: 上一月/n";
strAbout+="今日/t: 返回当天日期/n";
strAbout+=">/t: 下一月/n";
strAbout+="<</t: 下一年/n";
strAbout+="/nAgetimeCalendar/nVersion:v1.0/nDesigned By:暂停打印 2004-03-16 afos_koo@hotmail.com /n";
alert(strAbout);
}
calendar.setup();
}

使用示例：将上面的代码保存为calendar.js
然后在页面中写JS代码
<script language="JavaScript"
type="text/JavaScript"
src="../js/calendar.js">
</script>
<script>
var CalendarWebControl = new atCalendarControl();//初始化该控件
</script>
.....
//在需要使用日期控件的地方
<tr>
<td width="8%"
height="20"
class="td01">
<div align="center">出版日期</div></td>
<td class="td01"><input name="publishDate"
type="text"
id="dateInput"
size="12"
maxlength="12"
readonly="1"><input type="button"
class="boxttx"
onClick="CalendarWebControl.show(form1.dateInput,'',this);"
value="显示日历"></td>

</tr>

呵呵，踏破铁鞋无觅处，得来全不费工夫
谢了， 好贴 顶上去先
to only you 谢了
呵呵， 另外， 那个 <<
, <
按钮上的标签不能显示的 要改为"<<"
,">"
不知道你有没有遇到.