关于Struts 中的JS使用问题
在网上下了个日历JS控件的代码
但是在用在Struts 中的时候 不能使用 估计是标签之间的冲突问题
问下 我用styleId来取代html中的 text中的ID 时候 如何在JS中转化原先的ID 我把原来JS中的ID 都换成styleId 还是不行 情高手看看我的代码 以下是HTML的代码
<?xml version= "1.0 " encoding= "utf-8 "?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<!-- $Id: index.html,v 1.15 2005/03/05 14:38:10 mishoo Exp $ -->
<head> <meta http-equiv= "content-type " content= "text/xml; charset=utf-8 " />
<title> The Coolest DHTML Calendar - Online Demo </title>
<link rel= "stylesheet " type= "text/css " media= "all " href= "skins/aqua/theme.css " title= "Aqua " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-blue.css " title= "winter " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-blue2.css " title= "blue " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-brown.css " title= "summer " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-green.css " title= "green " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-win2k-1.css " title= "win2k-1 " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-win2k-2.css " title= "win2k-2 " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-win2k-cold-1.css " title= "win2k-cold-1 " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-win2k-cold-2.css " title= "win2k-cold-2 " />
<link rel= "alternate stylesheet " type= "text/css " media= "all " href= "calendar-system.css " title= "system " />
<!-- import the calendar script -->
<script type= "text/javascript " src= "calendar.js "> </script>
<!-- import the language module -->
<script type= "text/javascript " src= "lang/cn_utf8.js "> </script>
<!-- other languages might be available in the lang directory; please check
your distribution archive. -->
<!-- helper script that uses the calendar -->
<script type= "text/javascript ">
var oldLink = null;
// code to change the active stylesheet
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1 " || cal.sel.id == "sel3 "))
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close " button. It just hides the calendar without
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
// cal.destroy();
_dynarch_popupCalendar = null;
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown " signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format, showsTime, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
// we already have some calendar created
_dynarch_popupCalendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(1, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string ") {
cal.showsTime = true;
cal.time24 = (showsTime == "24 ");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
_dynarch_popupCalendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
_dynarch_popupCalendar.setDateFormat(format); // set the specified date format
_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field
_dynarch_popupCalendar.sel = el; // inform it what input field we use
// the reference element that we pass to showAtElement is the button that
// triggers the calendar. In this example we align the calendar bottom-right
// to the button.
_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br "); // show the calendar
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date " given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
</script>
</head>
<body >
<form action= "# ">
<br />
<b> Date #1: </b> <input type= "text " name= "date1 " id= "sel1 " size= "30 "
> <input type= "reset " value= " ... "
onclick= "return showCalendar( 'sel1 ', '%Y-%m-%d %H:%M ', '24 ', true); ">
</form>
</td>
</tr>
</table>
</body> </html>
请高手指点一下
[解决办法]
up&learn
[解决办法]
JS里面调用表单元素只能用ID
