在我的 GWT 应用程序中，我使用 Javascript 库为用户提供 SQLWhere 字符串生成器功能 - 用于支持“高级搜索”。
javascript 源当前仅提供日期的纯 html 文本字段。如果我使用纯 JS，我会合并许多第三方日期选择器库之一。
但是，我已经在客户端中安装了 GWT 日期编辑器（以支持其他 UI 功能）。
谁能推荐一种将 GWT 弹出编辑器合并到我的旧版 JavaScript 中的策略？由于 GWT 编译器混淆，我认为我无法可靠地预测 GWT 日期编辑器组件类的名称。
我认为这是从 GWT 推送配置或从 javascript 源拉取配置之间的平衡。
干杯，伊恩
首先，在 html 中创建您想要日期选择器所在的位置，如下所示：
<span id="dateBox"/>
创建一个新的入口点，称为“集成”
package com.example.integration.client;
import java.util.Date;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.datepicker.client.DateBox;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Integration implements EntryPoint {
@Override
public void onModuleLoad() {
//create date box
DateBox dateBox = new DateBox();
//set the value for the form submit
dateBox.getTextBox().getElement().setId("dateValueField");
//we need to override the default format
dateBox.setFormat(new DateBox.DefaultFormat() {
private DateTimeFormat dtf = DateTimeFormat.getFormat("MM/dd/yyyy");
@Override
public void reset(DateBox dateBox, boolean abandon) {
super.reset(dateBox, abandon);
}
@Override
public Date parse(DateBox dateBox, String text, boolean reportError) {
return super.parse(dateBox, text, reportError);
}
@Override
public String format(DateBox dateBox, Date date) {
if(date == null) return "";
return this.dtf.format(date);
}
});
//add to the span
RootPanel.get("dateBox").add(dateBox);
}
}
您可能应该将其放入新模块中，例如 com.example.integration.Integration.gwt.xml。
<module rename-to='integration'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.example.integration.client.Integration'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>
现在您已经完成了此操作，您需要执行标准 GWT 舞蹈以将编译后的代码添加到您的 HTML 中。您的最终 HTML 应该类似于：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Integration.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="integration/integration.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<form id="form">
<!-- old style date including formatting javascript and all the old cruft -->
Old Style Date:<input type="text" id="sometext" value="MM/DD/YYYY"/><br/>
<!-- new style. substitute your own styles and whatnot to make it not strange -->
New Hotness:<span id="dateBox"/>
<!-- you can submit this form as it is and it will just work (tm) -->
</form>
</body>
</html>
现在您的表单中将会有一个表单项（文本输入框），其 id 为“dateValueField”。这将像常规表单元素一样提交。
因此，其中一些建议应该能够帮助您走上正轨。祝你好运。
请注意，有一些更小、更简单的 javascript 库（包括一些 jQuery 的东西）可以更轻松地完成此操作。