您的位置：程序门 -> java -> web 开发

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

[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]

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

发表于：2007-04-12 15:50:40 楼主

最近做一个项目，可是对javascript又不大了解，在项目中的前台需要用户反馈选择的年月日，最好是下拉列表框那种，有谁会，请指点！

发表于：2007-04-12 15:57:591楼得分:0

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

发表于：2007-04-12 15:59:352楼得分:0

给大家介绍个技术群

大家一起学习，一起提高

26343309

发表于：2007-04-12 16:00:103楼得分:0

有点多分几次发给你
-------------------------------------------------------------------
<script>
//======================================================================
// cudigital cucalendar script
// version 1.0 code by edison1024.（mciro1024@163.com)
// 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> ";

发表于：2007-04-12 16:00:404楼得分:0

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;
}

发表于：2007-04-12 16:01:035楼得分:0

}
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))
{

发表于：2007-04-12 16:31:116楼得分:0

未免太多了吧不过还是要说声谢谢

发表于：2007-04-12 16:59:357楼得分:0

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

发表于：2007-04-12 17:32:498楼得分:0

<option> + for

发表于：2007-04-12 18:06:389楼得分:0

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

发表于：2007-04-12 18:24:1510楼得分:0

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

下一篇：hibernate连接两个库怎么连？在线等。。。。
上一篇：action的一点疑惑！

其他资讯