谁有在网页上可用的下拉选择日期的好控件？？？ ( 积分: 50 )

谁有在网页上可用的下拉选择日期的好控件？？？
就象在WIN32编程上常用的那样的控件。

用java脚本吧，多浏览器支持
<SCRIPT language=JavaScript1.2>
// 一个简单的测试是否IE浏览器的表达式
isIE = (document.all ? true : false);
// 得到IE中各元素真正的位移量，即使这个元素在一个表格中
function getIEPosX(elt) { return getIEPos(elt,&quot;Left&quot;
}
function getIEPosY(elt) { return getIEPos(elt,&quot;Top&quot;
}
function getIEPos(elt,which) {
iPos = 0
while (elt!=null) {
iPos += elt[&quot;offset&quot;
+ which]
elt = elt.offsetParent
}
return iPos
}
function getXBrowserRef(eltname) {
return (isIE ?do
cument.all[eltname].style :do
cument.layers[eltname]);
}
function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden';
}
// 按不同的浏览器进行处理元件的位置
function moveBy(elt,deltaX,deltaY) {
if (isIE) {
elt.left = elt.pixelLeft + deltaX;
elt.top = elt.pixelTop + deltaY;
} else
{
elt.left += deltaX;
elt.top += deltaY;
}
}
function toggleVisible(eltname) {
elt = getXBrowserRef(eltname);
if (elt.visibility == 'visible' || elt.visibility == 'show') {
elt.visibility = 'hidden';
} else
{
fixPosition(eltname);
elt.visibility = 'visible';
}
}
function setPosition(elt,positionername,isPlacedUnder) {
positioner = null;
if (isIE) {
positioner =do
cument.all[positionername];
elt.left = getIEPosX(positioner);
elt.top = getIEPosY(positioner);
} else
{
positioner =do
cument.images[positionername];
elt.left = positioner.x;
elt.top = positioner.y;
}
if (isPlacedUnder) { moveBy(elt,0,positioner.height);
}
}

//——————————————————————————————————————
// 判断浏览器
isIE = (document.all ? true : false);
// 初始月份及各月份天数数组
var months = new Array(&quot;一 月&quot;, &quot;二 月&quot;, &quot;三 月&quot;, &quot;四 月&quot;, &quot;五 月&quot;, &quot;六 月&quot;, &quot;七 月&quot;,
&quot;八 月&quot;, &quot;九 月&quot;, &quot;十 月&quot;, &quot;十一月&quot;, &quot;十二月&quot;
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);
var displayMonth = new Date().getMonth();
var displayYear = new Date().getFullYear();
var displayDivName;
var displayElement;
function getDays(month, year) {
//测试选择的年份是否是润年？
if (1 == month)
return ((0 == year % 4) &amp;&amp;
(0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday() {
// 得到今天的日期
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
// 并显示今天这个月份的日历
today = new getToday();
function newCalendar(eltName,attachedElement) {
if (attachedElement) {
if (displayDivName &amp;&amp;
displayDivName != eltName) hideElement(displayDivName);
displayElement = attachedElement;
}
displayDivName = eltName;
today = new getToday();
var parseYear = parseInt(displayYear + '');
var newCal = new Date(parseYear,displayMonth,1);
var day = -1;
var startDayOfWeek = newCal.getDay();
if ((today.year == newCal.getFullYear()) &amp;&amp;
(today.month == newCal.getMonth()))
{
day = today.day;
}
var intDaysInMonth =
getDays(newCal.getMonth(), newCal.getFullYear());
var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)
if (isIE) {
var elt =do
cument.all[eltName];
elt.innerHTML = daysGrid;
} else
{
var elt =do
cument.layers[eltName].document;
elt.open();
elt.write(daysGrid);
elt.close();
}
}
function incMonth(delta,eltName) {
displayMonth += delta;
if (displayMonth >= 12) {
displayMonth = 0;
incYear(1,eltName);
} else
if (displayMonth <= -1) {
displayMonth = 11;
incYear(-1,eltName);
} else
{
newCalendar(eltName);
}
}
function incYear(delta,eltName) {
displayYear = parseInt(displayYear + '') + delta;
newCalendar(eltName);
}
function makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {
var daysGrid;
var month = newCal.getMonth();
var year = newCal.getFullYear();
var isThisYear = (year == new Date().getFullYear());
var isThisMonth = (day > -1)
daysGrid = '<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>';
daysGrid += '<font face=&quot;courier new, courier&quot;
size=2>';
daysGrid += '<a href=&quot;javascript:hideElement(/'' + eltName + '/')&quot;>x</a>';
daysGrid += '&amp;nbsp;&amp;nbsp;';
daysGrid += '<a href=&quot;javascript:incMonth(-1,/'' + eltName + '/')&quot;>&amp;laquo;
</a>';
daysGrid += '<b>';
if (isThisMonth) { daysGrid += '<font color=red>' + months[month] + '</font>';
}
else
{ daysGrid += months[month];
}
daysGrid += '</b>';
daysGrid += '<a href=&quot;javascript:incMonth(1,/'' + eltName + '/')&quot;> &amp;raquo;</a>';
daysGrid += '&amp;nbsp;&amp;nbsp;&amp;nbsp;';
daysGrid += '<a href=&quot;javascript:incYear(-1,/'' + eltName + '/')&quot;>&amp;laquo;
</a>';
daysGrid += '<b>';
if (isThisYear) { daysGrid += '<font color=red>' + year + '</font>';
}
else
{ daysGrid += ''+year;
}
daysGrid += '</b>';
daysGrid += '<a href=&quot;javascript:incYear(1,/'' + eltName + '/')&quot;> &amp;raquo;</a><br>';
daysGrid += '&amp;nbsp;Su Mo Tu We Th Fr Sa&amp;nbsp;<br>&amp;nbsp;';
var dayOfMonthOfFirstSunday = (7 - startDay + 1);
for (var intWeek = 0;
intWeek < 6;
intWeek++) {
var dayOfMonth;
for (var intDay = 0;
intDay < 7;
intDay++) {
dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;
if (dayOfMonth <= 0) {
daysGrid += &quot;&amp;nbsp;&amp;nbsp;
&quot;;
} else
if (dayOfMonth <= intDaysInMonth) {
var color = &quot;blue&quot;;
if (day > 0 &amp;&amp;
day == dayOfMonth) color=&quot;red&quot;;
daysGrid += '<a href=&quot;javascript:setDay(';
daysGrid += dayOfMonth + ',/'' + eltName + '/')&quot;
'
daysGrid += 'style=&quot;color:' + color + '&quot;>';
var dayString = dayOfMonth + &quot;</a> &quot;;
if (dayString.length == 6) dayString = '0' + dayString;
daysGrid += dayString;
}
}
if (dayOfMonth < intDaysInMonth) daysGrid += &quot;<br>&amp;nbsp;&quot;;
}
return daysGrid + &quot;</td></tr></table>&quot;;
}
function setDay(day,eltName) {
displayElement.value = displayYear + &quot;-&quot;
+ (displayMonth + 1) + &quot;-&quot;
+ day ;
hideElement(eltName);
}

//——————————————————————————————————————
<!--
// fixPosition() 这个函数和前面所讲的那个函数一样
//
function fixPosition(eltname) {
elt = getXBrowserRef(eltname);
positionerImgName = eltname + 'Pos';
// hint: try setting isPlacedUnder to false
isPlacedUnder = false;
if (isPlacedUnder) {
setPosition(elt,positionerImgName,true);
} else
{
setPosition(elt,positionerImgName)
}
}
function toggleDatePicker(eltName,formElt) {
var x = formElt.indexOf('.');
var formName = formElt.substring(0,x);
var formEltName = formElt.substring(x+1);
newCalendar(eltName,document.forms[formName].elements[formEltName]);
toggleVisible(eltName);
}
// fixPositions() 这个函数前面也讲过
function fixPositions()
{
fixPosition('daysOfMonth');
fixPosition('daysOfMonth2');
}
// -->
</SCRIPT>

怎么调用？？？？

<P>出库查询－请选择开始和终止日期：</p>
<FORM action=&quot;/vipk/ckid&quot;
method=&quot;post&quot;
name=date target=&quot;_blank&quot;>
<CENTER>
<TABLE border=1 width=&quot;45%&quot;
style=&quot;border-collapse: collapse&quot;
bordercolor=&quot;#DDB5B9&quot;>
<TBODY>
<TR>
<TD width=&quot;89&quot;>开始日期:</TD>
<TD width=&quot;120&quot;>
<INPUT name=ret size=10 value=&quot;2003-12-6&quot;>
<IMG align=absMiddle alt=&quot;点击这里来选择报表开始日期&quot;
border=0 height=19 id=daysOfMonthPos name=daysOfMonthPos
onmouseup=&quot;toggleDatePicker('daysOfMonth','date.ret')&quot;
src=&quot;/pic/0.gif&quot;
width=19>
<DIV id=daysOfMonth style=&quot;POSITION: absolute&quot;></DIV></TD></TR>
<TR>
<TD width=&quot;89&quot;>终止日期:</TD>
<TD width=&quot;120&quot;>
<INPUT name=ret2 size=10 value=&quot;2003-12-6&quot;>
<IMG align=absMiddle alt=&quot;点击这里来选择报表结束日期&quot;
border=0 height=19 id=daysOfMonth2Pos name=daysOfMonth2Pos
onmouseup=&quot;toggleDatePicker('daysOfMonth2','date.ret2')&quot;
src=&quot;/pic/0.gif&quot;
width=19>
<DIV id=daysOfMonth2
style=&quot;POSITION: absolute&quot;></DIV></TD></TR></TBODY></TABLE>
<p>
<input type=&quot;submit&quot;
name=&quot;Submit&quot;
value=&quot;提交&quot;>
<input type=&quot;reset&quot;
name=&quot;Submit2&quot;
value=&quot;重置&quot;>
</p>
</CENTER></FORM>
<P>
<SCRIPT language=JavaScript1.2>
function Cancel() {
hideElement(&quot;daysOfMonth&quot;
}
</SCRIPT>
<SCRIPT language=JavaScript1.2>
<!--
hideElement('daysOfMonth');
hideElement('daysOfMonth2');
//-->
</SCRIPT>

在本机调试时，xp sp2机器会提示脚本不安全，
但在网站上使用的时候没提示的，这是因为ie对本地文件的安全设置更高引起的。

我试了，基本上可用，但能不能加上一个判断，当使用者点其它地方时，显示日期的那一个层不显示，不然就要必须选择一个日期才能不显示。

这个你用点java脚本可以控制的，网上找一下资料，应该不难。也可以设置在鼠标离开日期选择区域时就隐藏，这样判断简单一点。