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

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

当时刚接触到需求的第一时间想到的就是为< sx:datetimepicker >添加onchange事件,然后用document.getElementById().value获取控件的值,结果很悲催的发现当前日期控件的日期改变后另一个控件并没有同步修改。我在js函数中加入了一行alert();结果发现无论怎么改变日历框页面一直没有弹框,也就是说onchange事件一直没有被触发。随后我又用jquery进行了尝试,结果还是什么都没有发生。。。

在网上百度了好久,都没有找到合适的答案,最后在struts的官网(http://struts.apache.org/docs/datetimepicker.html)上看到了这个

< sx:datetimepicker >貌似是dojo的一个插件,需要使用dojo的时间处理机制和对象获取方式(具体原理不清楚。。。)

修改后的代码:

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%@ taglib prefix="s" uri="/struts-tags"%>
 3 <%@ taglib uri="/struts-dojo-tags" prefix="sx"%>
 4 <%
 5 String path = request.getContextPath();
 6 String basePath = request.getScheme() + "://"
 7 + request.getServerName() + ":" + request.getServerPort()
 8 + path + "/";
 9 %>
10
11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
12 <html>
13 <head>
14 <base href="<%=basePath%>">
15
16 <title>九地市无线话务量查询</title>
17
18 <meta http-equiv="pragma" content="no-cache">
19 <meta http-equiv="cache-control" content="no-cache">
20 <meta http-equiv="expires" content="0">
21 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
22 <meta http-equiv="description" content="This is my page">
23 <sx:head />
24 <script type="text/javascript" language="javascript">
25 //日期选择框同步
26 function synchronizeDate() {
27 var date = new Date(dojo.widget.byId("nowDay").getValue());
28 var year = date.getFullYear();
29 date.setYear(year - 1);
30 dojo.widget.byId("pastDay").setValue(date);
31 }
32 dojo.event.topic.subscribe("/value", synchronizeDate);
33 </script>
34 /head>
35 <body>
36 <sx:datetimepicker id="nowDay" name="now" label="当前日期" value="#request.now" displayFormat="yyyy-MM-dd" valueNotifyTopics="/value" />
37 <sx:datetimepicker id="pastDay" name="yesteryear" label="去年同期" value="#request.yesteryear" displayFormat="yyyy-MM-dd" />
38 </body>

至此,功能完成!

关键时刻还是官方文档可靠啊~~

时间: 2024-10-10 05:40:56

使用JS控制struts的日期控件datetimepicker的相关文章

Windows应用程序高级控件之日期控件-DateTimePicker

DateTimePicker--日期控件 用途:用于选择日期和时间,但只能选择一个时间,而不是连续的时间段.当然也可以直接输入日期和时间 DateTimePicker的Format属性设置为Time,即可时间控件中只显示时间. Format属性用于获取或设置控件中显示的日期和时间格式 DateTimePickerFormat枚举值如下: Custom      DateTimePicker控件以自定义格式显示日期/时间值 Long        DateTimePicker控件以用户操作系统设置

C#日期控件datetimepicker保存空值方法

方法一(推荐): 设置datetimepicker的属性ShowCheckBox为true 在窗口初始化时候,添加代码this.datetimepicker1.Checked = false; 保存日期值入库的时候,就可以根据if(this.datetimepicker1.Checked ==false),保存空值. 方法二: 在窗口初始化函数中添加: this.dateTimePicker1.Format=DateTimePickerFormat.Custom; this.dateTimePi

zui框架配置日期控件只显示年月

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

12 Python+selenium对日期控件进行处理(采用执行JS脚本)

[环境信息] Python34+IE+windows2008 [说明] 1.对于日期控件,没有办法通过定位元素再直接传值的方式处理.可以采用执行JavaScript处理. PS:还要去学学js怎么写,不然要用的时候就只有到处copy了. [示例] 1.对于如下格式的日期控件需要用JS处理. 2.处理方式:通过driver.execute_script(js)执行. #问题消除时间,调用JS的当前时间 js = "function getCurrentDate() {" " v

js 常用日期控件使用

一.My97DatePicker 当前最新版本: 4.8 官网:http://www.my97.net/ csdn下载地址: http://download.csdn.net/detail/czw2010/8585183 1. 使用说明: My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除(4.8以后不存在此文件) 各目录及文件的用途: WdatePicker.js 配置文件,在调用的

layDate1.0正式发布,您一直在寻找的的js日期控件

你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate延续了layui一贯的简单与易用,本着资源共享的开发者精神和对网页日历交互的无穷追求,她将长年被维护和更新,

js插件----&gt;日期控件My97DataPicker的使用

My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置.今天我们就开始My97DatePicker的基础使用. 日期控件My97DataPicker 一.将My97DataPicker的文件部署到eclipse中 My97DataPicker的下载地址:http://www.my97.net/dp/down.asp.下载完成之后,将My97DataPic

为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js

为 jQuery EasyUI 1.4 的datebox或datetimebox添加一个清空按钮 使用场景:为用户指定了日期的格式,且日期可以为空 修改语言包easyui-lang-zh_CN.js 在if ($.fn.datebox){ 的下一行添加 (41或42行) $.fn.datebox.defaults.cleanText = '清空'; 在if ($.fn.datetimebox && $.fn.datebox){  $.extend($.fn.datetimebox.defa

js多选日期控件

js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianxiangbing/calendar calendar js日历控件 用法 1 <input type="text" id="calendar" value="2015-04-15"/> 2 <script src="../