使用JS控制struts的日期控件datetimepicker

时间：2023-03-09 15:42:07
使用JS控制struts的日期控件datetimepicker

功能需求：页面主要有两个日历框，一个是当前日期，一个是去年同期，要求当用户改变当前日期时，同步修改去年同期为当前日期-1年。

当时刚接触到需求的第一时间想到的就是为< sx:datetimepicker >添加onchange事件，然后用document.getElementById().value获取控件的值，结果很悲催的发现当前日期控件的日期改变后另一个控件并没有同步修改。我在js函数中加入了一行alert();结果发现无论怎么改变日历框页面一直没有弹框，也就是说onchange事件一直没有被触发。随后我又用jquery进行了尝试，结果还是什么都没有发生。。。
在网上百度了好久，都没有找到合适的答案，最后在struts的官网(http://struts.apache.org/docs/datetimepicker.html)上看到了这个
使用JS控制struts的日期控件datetimepicker
< sx:datetimepicker >貌似是dojo的一个插件，需要使用dojo的时间处理机制和对象获取方式（具体原理不清楚。。。）
修改后的代码：
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%@ taglib uri="/struts-dojo-tags" prefix="sx"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme() + "://"

 + request.getServerName() + ":" + request.getServerPort()

 + path + "/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <base href="<%=basePath%>">

 <title>九地市无线话务量查询</title>

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <sx:head />

 <script type="text/javascript" language="javascript">

 //日期选择框同步

 function synchronizeDate() {

 var date = new Date(dojo.widget.byId("nowDay").getValue());

 var year = date.getFullYear();

 date.setYear(year - 1);

 dojo.widget.byId("pastDay").setValue(date);

 }

 dojo.event.topic.subscribe("/value", synchronizeDate);

 </script>

 /head>

 <body>

 <sx:datetimepicker id="nowDay" name="now" label="当前日期" value="#request.now" displayFormat="yyyy-MM-dd" valueNotifyTopics="/value" />

 <sx:datetimepicker id="pastDay" name="yesteryear" label="去年同期" value="#request.yesteryear" displayFormat="yyyy-MM-dd" />

 </body>
至此，功能完成！
关键时刻还是官方文档可靠啊~~

相关文章