不看会后悔的Windows XP之经验谈	简单快捷DIY实用家庭影院

struts javascript脚本问题

楼主swallow999999（）2004-12-01 15:50:29 在 Java / 框架、开源提问

假设我做了一个文本框，用来填写日期的，但是我现在不想自己输入那个日期，我想在这个文本框后面做个按钮来选择时间，就是直接直接在时间控件上选择，然后直接进入到那个日期文本框中，我用javascript脚本应该怎么来写呢
<html:form action="">
<html:text property="time"/><html:submit property="submit" value="xuanze" onclick=""/>
</html:form>
我的onclick里应该怎么写，里面的函数又写在那个地方呢，有没有什么列子？问题点数：20、回复次数：11Top

1 楼GFDVAn（马超）回复于 2004-12-01 16:06:09 得分 2

一段显示日期的js 希望有帮助
<script language=JavaScript>
today=new Date();
document.write(
"<font color=##000000 style='font-size:9pt;font-family: 宋体'> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
"</font>" );
</script>Top

2 楼haha7（怕死不当程序员）回复于 2004-12-01 16:06:35 得分 2

3 楼swallow999999（）回复于 2004-12-01 16:40:06 得分 0

那在struts怎么用呢，能否给个列子Top

4 楼haha7（怕死不当程序员）回复于 2004-12-01 16:48:25 得分 5

ya ~~开始没看见struts,sorry~~Top

5 楼swallow999999（）回复于 2004-12-01 16:52:45 得分 0

没事，能否帮我想想办法呢。Top

6 楼xdhou（办公室坐久了，想晒晒太阳）回复于 2004-12-01 16:58:19 得分 5

和struts有什么关系，完全用客户端JS就可以实现嘛，Top

7 楼swallow999999（）回复于 2004-12-01 17:02:14 得分 0

写个列子给我看看可以吗Top

8 楼xdhou（办公室坐久了，想晒晒太阳）回复于 2004-12-01 17:03:58 得分 2

/*
Web Calendar V3.0 使用说明

1.调用方法
<script language="JavaScript" src="WebCalendar.js"></script>
<input type="text" onfocus="calendar()">
<input id="txtDate" onfocus="calendar()"><input type=button value=calendar onclick="calendar(txtDate)">

2.显示设置
下面这段日历定制的 JavaScript 代码你可以一个都不定义，使用其默认值
<script language="JavaScript">

</script>

3.函数说明
函数名函数的用途说明（在主页面里自定义函数时请不要与以下的函数名冲突）
calendar() 用户的主调函数
writeIframe() 对iframe进行初始化
WebCalendar() 初始化日历的设置
funMonthSelect() 月份的下拉框
funYearSelect() 年份的下拉框
prevM() 往前翻月份
nextM() 往后翻月份
prevY() 往前翻 Year
nextY() 往后翻 Year
hiddenSelect()　隐藏年份与月份的下拉框
hiddenCalendar() 隐藏日历控件
appendZero(n) 日期自动补零程序
dayMouseOver() 日历里日期的 onmouseover 事件
dayMouseOut() 日历里日期的 onmouseout 事件
writeCalendar() 对日历显示数据的核心处理程序
returnDate() 根据日期格式等返回用户选定的日期
document.onclick() if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
若你要使用主网页的 document.onclick() 事件时，请加上上面这句代码（这句代码日历控件里已存在），
这句代码是当你点击日历以外的地方时日历自动关闭，若不使用 document.onclick() 事件就不需要再定义了．
全局变量　WebCalendar 日历控件的实例，你可以通过它对日历进行定制

*/
Top

9 楼xdhou（办公室坐久了，想晒晒太阳）回复于 2004-12-01 17:04:41 得分 2

document.write("<div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'>");
document.write("<iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div>");
function writeIframe()
{
var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+
"*{font-size: 12px; font-family: 宋体}"+
".bg{ color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
"table#tableMain{ width: 142; height: 180;}"+
"table#tableWeek td{ color: "+ WebCalendar.lightColor +";}"+
"table#tableDay td{ font-weight: bold;}"+
"td#meizzYearHead, td#meizzYearMonth{color: "+ WebCalendar.wordColor +"}"+
".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+
"border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+
".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+
"border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+
"input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18; cursor: hand;"+
" color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+
"</style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz>";
if (WebCalendar.drag){ strIframe += "<scr"+"ipt language=javascript>"+
"var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+
"if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+
"o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+
"o.style.top = parseInt(o.style.top) + window.event.clientY-cy;}}"+
"function document.onkeydown(){ switch(window.event.keyCode){ case 27 : parent.hiddenCalendar(); break;"+
"case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+
"case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+
"function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}
strIframe += "<select name=tmpYearSelect onblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:18;display:none'"+
" onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
"<select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:74;display:none'"+
" onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
"<table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+
"<tr><td width=140 height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center>"+
" <td width=15 height=19 class=bg title='向前翻 1 月快捷键：←' style='cursor: hand' onclick='parent.prevM()'><b><</b></td>"+
" <td width=60 id=meizzYearHead title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText, 10))'"+
" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
" <td width=50 id=meizzYearMonth title='点击此处选择月份' onclick='parent.funMonthSelect(parseInt(this.innerText, 10))'"+
" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
" <td width=15 class=bg title='向后翻 1 月快捷键：→' onclick='parent.nextM()' style='cursor: hand'><b>></b></td></tr></table>"+
"</td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0 ";
if(WebCalendar.drag){strIframe += "onmousedown='dragStart()' onmouseup='drag=false' onmouseout='drag=false'";}
strIframe += " borderColorLight='"+ WebCalendar.darkColor +"' borderColorDark='"+ WebCalendar.lightColor +"'>"+
" <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+
"</td></tr><tr><td valign=top width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0>";
for(var x=0; x<5; x++){ strIframe += "<tr>";
for(var y=0; y<7; y++) strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>"; strIframe += "</tr>";}
strIframe += "<tr>";
for(var x=35; x<39; x++) strIframe += "<td class=out id='meizzDay"+ x +"'></td>";
strIframe +="<td colspan=3 class=out title='"+ WebCalendar.regInfo +"'><input style=' background-color: "+
WebCalendar.btnBgColor +";cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' onfocus='this.blur()'"+
" type=button value='    关闭' onclick='parent.hiddenCalendar()'></td></tr></table>"+
"</td></tr><tr><td height=20 width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table border=0 cellpadding=1 cellspacing=0 width=140>"+
" <tr><td><input name=prevYear title='向前翻 1 年快捷键：↑' onclick='parent.prevY()' type=button value='<<'"+
" onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+
" onfocus='this.blur()' name=prevMonth title='向前翻 1 月快捷键：←' onclick='parent.prevM()' type=button value='< '>"+
" </td><td align=center><input name=today type=button value='Today' onfocus='this.blur()' style='width: 50' title='当前日期快捷键：T'"+
" onclick=\"parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())\">"+
" </td><td align=right><input title='向后翻 1 月快捷键：→' name=nextMonth onclick='parent.nextM()' type=button value=' >'"+
" onfocus='this.blur()'><input name=nextYear title='向后翻 1 年快捷键：↓' onclick='parent.nextY()' type=button value='>>'"+
" onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+
"</td></tr><table></form></body></html>";
with(WebCalendar.iframe)
{
document.writeln(strIframe); document.close();
for(var i=0; i<39; i++)
{
WebCalendar.dayObj[i] = eval("meizzDay"+ i);
WebCalendar.dayObj[i].onmouseover = dayMouseOver;
WebCalendar.dayObj[i].onmouseout = dayMouseOut;
WebCalendar.dayObj[i].onclick = returnDate;
}
}
}
Top

10 楼xdhou（办公室坐久了，想晒晒太阳）回复于 2004-12-01 17:05:12 得分 2

function WebCalendar() //初始化日历的设置
{
this.regInfo = "WEB Calendar V3.0关闭的快捷键：[Esc]";
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(39); //定义日历展示用的数组
this.dayObj = new Array(39); //定义日期展示控件数组
this.dateStyle = null; //保存格式化后日期数组
this.objExport = null; //日历回传的显示控件
this.eventSrc = null; //日历显示的触发控件
this.inputDate = null; //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值
this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
this.calendar = getObjectById("meizzCalendarLayer"); //日历的层
this.dateReg = ""; //日历格式验证的正则式
this.yearFall = 100; //定义年下拉框的年差值
this.format = "yyyy-mm-dd"; //回传日期的格式
this.timeShow = false; //是否返回时间
this.drag = true; //是否允许拖动
this.darkColor = "#0000D0"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#E6E6FA"; //控件的按钮背景色
this.wordColor = "#000080"; //控件的文字颜色
this.wordDark = "#DCDCDC"; //控件的暗文字颜色
this.dayBgColor = "#F5F5FA"; //日期数字背景色
this.todayColor = "#FF0000"; //今天在日历上的标示背景色
this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色
} var WebCalendar = new WebCalendar();

function calendar() //主调函数
{
var e = window.event.srcElement;
writeIframe();
var o = WebCalendar.calendar.style;
WebCalendar.eventSrc = e;
if (arguments.length == 0)
WebCalendar.objExport = e;
else
WebCalendar.objExport = eval(arguments[0]);

WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";

var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft, p = e.type;

while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}

o.display = "none";
//WebCalendar.iframe.document.body.focus();

var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;
var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;

if (document.body.clientHeight + dt - t - h >= ch)
o.top = (p=="image")? t + h : t + h + 6;
else
o.top = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;

if (dw + dl - l >= cw)
o.left = l;
else
o.left = (dw >= cw) ? dw - cw + dl : dl;

if (!WebCalendar.timeShow)
WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
else
WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;

try{
if (WebCalendar.objExport.value.trim() != ""){
WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
if (WebCalendar.dateStyle == null)
{
WebCalendar.thisYear = new Date().getFullYear();
WebCalendar.thisMonth = new Date().getMonth()+ 1;
WebCalendar.thisDay = new Date().getDate();
alert("原文本框里的日期有错误！\n可能与你定义的显示时分秒有冲突！");
e.focus();
writeCalendar();
return false;
}
else
{
WebCalendar.thisYear = parseInt(WebCalendar.dateStyle[1], 10);
WebCalendar.thisMonth = parseInt(WebCalendar.dateStyle[3], 10);
WebCalendar.thisDay = parseInt(WebCalendar.dateStyle[4], 10);
WebCalendar.inputDate = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+
parseInt(WebCalendar.thisYear, 10);
writeCalendar();
}
}
else
writeCalendar();
}
catch(e){
writeCalendar();
}

o.display = "";
}

Top

11 楼swallow999999（）回复于 2004-12-01 17:22:53 得分 0

还是不知道你这个是什么意思。

我的意思就是说，我通过点按纽，弹出一个日历的控件，然后选择某一天，选定后自动填充文本框里的日期。Top