Struts2中datetimepicker標籤

時間 2019-11-07

標籤 struts2 struts datetimepicker 標籤欄目 Struts 简体版

原文原文鏈接

在之前的struts2版本中s:datetimepicker只須要在head標籤處設置<s:head theme="ajax"/>，就能夠直接使用s:datetimepicker的標籤了。
而在2.1.6版本中不能直接這樣使用了，將datetimepicker移除了。緣由是此標籤調用了dojo的datetimepicker的庫。
因此如今使用的時候首先要導入一個庫:struts2-dojo-plugin-2.1.6.jar。
而後還要設置dojo的taglib
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>
一樣也須要對theme進行設置
<s:head theme="xhtml"/>
<sd:head parseContent="true"/>
上面的設置在head標籤中。
而後使用sd:datetimepocker就能夠實現了。
完整示例:
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
   <head>
      <s:head theme="xhtml" />
      <sx:head parseContent="true" />
   </head>
   <body>
      <sx:datetimepicker name="birthday" value="%{date}"
          displayFormat="yy-MM-dd" />
   </body>
javascript

Struts2 datetimepicker 日期亂碼解決方案html

在使用 Struts2 dateTimePicker 控件時, 9月份後會出現亂碼現象。
（本人以struts2-dojo-plugin-2.2.1爲例子）
請替換或直接修改如下文件(並保存爲UTF-8格式)：
struts2-dojo-plugin-2.2.1.jar\org\apache\struts2\static\dojo\nls\
dojo_zh.js 和 dojo_zh-cn.js 文件
1. 文件 "dojo_zh.js"
------------------------------------------------------------------------------
dojo.provide("nls.dojo_zh");dojo.provide("dojo.i18n.calendar.nls.gregorian");
dojo.i18n.calendar.nls.gregorian._built=true;dojo.provide("dojo.i18n.calendar.nls.gregorian.zh");
dojo.i18n.calendar.nls.gregorian.zh={
"days-standAlone-narrow":["日","一","二","三","四","五","六"],
"eras":["公元前","公元"],
"am":"上午",
"months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"days-format-abbr":["週日","週一","週二","週三","週四","週五","週六"],
"pm":"下午",
"months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
"field-weekday":"Day of the Week",
"dateFormat-medium":"yyyy MMM d",
"field-second":"Second",
"field-week":"Week",
"timeFormat-full":"HH:mm:ss z",
"field-year":"Year",
"field-minute":"Minute",
"timeFormat-medium":"HH:mm:ss",
"field-hour":"Hour",
"dateFormat-long":"yyyy MMMM d",
"field-day":"Day",
"field-dayperiod":"Dayperiod",
"field-month":"Month",
"dateFormat-short":"yy/MM/dd",
"field-era":"Era",
"timeFormat-short":"HH:mm",
"timeFormat-long":"HH:mm:ss z",
"dateFormat-full":"EEEE, yyyy MMMM dd",
"field-zone":"Zone"
};
dojo.provide("dojo.i18n.calendar.nls.gregorianExtras");
dojo.i18n.calendar.nls.gregorianExtras._built=true;
dojo.provide("dojo.i18n.calendar.nls.gregorianExtras.zh");
dojo.i18n.calendar.nls.gregorianExtras.zh={"dateFormat-yearOnly":"yyyy'年'"};
dojo.provide("dojo.i18n.calendar.nls.gregorian");
dojo.i18n.calendar.nls.gregorian._built=true;
dojo.provide("dojo.i18n.calendar.nls.gregorian.zh");
dojo.i18n.calendar.nls.gregorian.zh={
"days-standAlone-narrow":["日","一","二","三","四","五","六"],
"eras":["公元前","公元"],
"am":"上午",
"months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"days-format-abbr":["週日","週一","週二","週三","週四","週五","週六"],
"pm":"下午","months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
"field-weekday":"Day of the Week",
"dateFormat-medium":"yyyy MMM d",
"field-second":"Second",
"field-week":"Week",
"timeFormat-full":"HH:mm:ss z",
"field-year":"Year",
"field-minute":"Minute",
"timeFormat-medium":"HH:mm:ss",
"field-hour":"Hour",
"dateFormat-long":"yyyy MMMM d",
"field-day":"Day",
"field-dayperiod":"Dayperiod",
"field-month":"Month",
"dateFormat-short":"yy/MM/dd",
"field-era":"Era",
"timeFormat-short":"HH:mm",
"timeFormat-long":"HH:mm:ss z",
"dateFormat-full":"EEEE, yyyy MMMM dd",
"field-zone":"Zone"
};
dojo.provide("dojo.widget.nls.TimePicker");
dojo.widget.nls.TimePicker._built=true;
dojo.provide("dojo.widget.nls.TimePicker.zh");
dojo.widget.nls.TimePicker.zh={"any":"any"};
dojo.provide("dojo.widget.nls.DropdownTimePicker");
dojo.widget.nls.DropdownTimePicker._built=true;
dojo.provide("dojo.widget.nls.DropdownTimePicker.zh");
dojo.widget.nls.DropdownTimePicker.zh={"selectTime":"Select time"};
dojo.provide("dojo.widget.nls.DropdownDatePicker");
dojo.widget.nls.DropdownDatePicker._built=true;
dojo.provide("dojo.widget.nls.DropdownDatePicker.zh");
dojo.widget.nls.DropdownDatePicker.zh={"selectDate":"Select a date"};
=============================================================================
2. 文件 "dojo_zh-cn.js"
------------------------------------------------------------------------------
dojo.provide("nls.dojo_zh-cn");
dojo.provide("dojo.i18n.calendar.nls.gregorian");
dojo.i18n.calendar.nls.gregorian._built=true;
dojo.provide("dojo.i18n.calendar.nls.gregorian.zh_cn");
dojo.i18n.calendar.nls.gregorian.zh_cn={
"dateFormat-medium":"yyyy-M-d",
"field-second":"秒鐘",
"field-week":"周",
"timeFormat-full":"ahh'時'mm'分'ss'秒' z",
"field-year":"年",
"field-minute":"分鐘",
"timeFormat-medium":"ahh:mm:ss",
"field-hour":"小時",
"dateFormat-long":"yyyy'年'M'月'd'日'",
"field-day":"日",
"field-dayperiod":"上午/下午",
"field-month":"月",
"dateFormat-short":"yy-M-d",
"field-era":"時期",
"timeFormat-short":"ah:mm",
"timeFormat-long":"ahh'時'mm'分'ss'秒'",
"dateFormat-full":"yyyy'年'M'月'd'日'EEEE",
"field-weekday":"周天",
"field-zone":"區域",
"days-standAlone-narrow":["日","一","二","三","四","五","六"],"eras":["公元前","公元"],
"am":"上午",
"months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"days-format-abbr":["週日","週一","週二","週三","週四","週五","週六"],
"pm":"下午",
"months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
};
dojo.provide("dojo.i18n.calendar.nls.gregorianExtras");
dojo.i18n.calendar.nls.gregorianExtras._built=true;
dojo.provide("dojo.i18n.calendar.nls.gregorianExtras.zh_cn");
dojo.i18n.calendar.nls.gregorianExtras.zh_cn={"dateFormat-yearOnly":"yyyy'年'"};
dojo.provide("dojo.i18n.calendar.nls.gregorian");
dojo.i18n.calendar.nls.gregorian._built=true;
dojo.provide("dojo.i18n.calendar.nls.gregorian.zh_cn");
dojo.i18n.calendar.nls.gregorian.zh_cn={
"dateFormat-medium":"yyyy-M-d",
"field-second":"秒鐘",
"field-week":"周",
"timeFormat-full":"ahh'時'mm'分'ss'秒' z",
"field-year":"年",
"field-minute":"分鐘",
"timeFormat-medium":"ahh:mm:ss",
"field-hour":"小時",
"dateFormat-long":"yyyy'年'M'月'd'日'",
"field-day":"日",
"field-dayperiod":"上午/下午",
"field-month":"月",
"dateFormat-short":"yy-M-d",
"field-era":"時期",
"timeFormat-short":"ah:mm",
"timeFormat-long":"ahh'時'mm'分'ss'秒'",
"dateFormat-full":"yyyy'年'M'月'd'日'EEEE",
"field-weekday":"周天",
"field-zone":"區域",
"days-standAlone-narrow":["日","一","二","三","四","五","六"],
"eras":["公元前","公元"],
"am":"上午",
"months-format-abbr":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"days-format-abbr":["週日","週一","週二","週三","週四","週五","週六"],
"pm":"下午",
"months-format-wide":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
"months-standAlone-narrow":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"days-format-wide":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
};
dojo.provide("dojo.widget.nls.TimePicker");
dojo.widget.nls.TimePicker._built=true;
dojo.provide("dojo.widget.nls.TimePicker.zh_cn");
dojo.widget.nls.TimePicker.zh_cn={"any":"any"};
dojo.provide("dojo.widget.nls.DropdownTimePicker");
dojo.widget.nls.DropdownTimePicker._built=true;
dojo.provide("dojo.widget.nls.DropdownTimePicker.zh_cn");
dojo.widget.nls.DropdownTimePicker.zh_cn={"selectTime":"Select time"};
dojo.provide("dojo.widget.nls.DropdownDatePicker");
dojo.widget.nls.DropdownDatePicker._built=true;
dojo.provide("dojo.widget.nls.DropdownDatePicker.zh_cn");
dojo.widget.nls.DropdownDatePicker.zh_cn={"selectDate":"Select a date"};

**************************************************************************************************

java

最近項目使用Spring+Struts2+JPA(Hibernate)的框架進行開發，大量使用了Struts2的標籤庫，確實讓JSP頁面乾淨了很多，也大大提升了開發的效率。ajax

可是在使用sx:datetimepicker標籤時發現一個問題，就是在輸入日期內容，而後刪除內容，輸入框內爲""時，再點擊日期選擇的彈出控件時，發現日期所有變成了NaN。apache

下面分析緣由和找到解決辦法。若是隻是想看解決辦法，請直接看最後的最終的解決辦法部分。瀏覽器

基本解決辦法緩存

開始的解決辦法是，對日期的格式進行了校驗，若是選擇了NaN的日期提交，就提示日期格式錯誤，不讓提交。app

查找緣由框架

而後網上查了一下，都沒有完全解決的辦法，大都是說這個是個BUG，提交前校驗就能夠了。幾年前就有的BUG了，估計Struts也沒有心思去解決，因此，就準備本身去修正。ide

由於是使用了sx:datetimepicker標籤，因此，先去看了一下該標籤的源代碼。

在源碼包中struts-2.1.8\src\plugins\dojo\src\main\java\org\apache\struts2\dojo\components找到了DateTimePicker.java，查看了一下只是一個初始化設置和寫出html代碼的普通標籤庫而已。

因此，去看看它最終生成了什麼樣子的代碼。生成的代碼大體以下

<div
dojoType="struts:StrutsDatePicker" id="app.beginDate" value="2010-05-13T09:27:31" name="app.beginDate" inputName="dojo.app.beginDate" displayFormat="yyyy-MM-dd" saveFormat="rfc"></div>
<script language="JavaScript" type="text/javascript">djConfig.searchIds.push("app.beginDate");</script>

頭部聲明部分引入了

同時進行了dojo設置，

使用了dojo，因此，不出意外StrutsDatePicker這個小組件應該在struts_dojo.js這個文件中定義。

在該js中去搜索StrutsDatePicker，找到了

dojo.provide("struts.widget.StrutsDatePicker");

發現其又使用了

dojo.widget.DropdownDatePicker這個小組件。

繼續查DropdownDatePicker，找到dojo.provide("dojo.widget.DropdownDatePicker");，在其代碼中找到了

if(_e5f==""){
this.datePicker.setDate("");
}

這段代碼，而_e5f就是改變爲控制後的存儲字符串，直接把

this.datePicker.setDate("");

註釋掉，測試一下，發現不會再出現那個討厭的NaN了。

可是顯示的日期是清空輸入框日期前的那個舊的日期，按照普通的邏輯，輸入框日期爲空，應該顯示當前日期，和初始化時候的保持一致麼。

繼續找，發現了

this.datePicker=dojo.widget.createWidget("DatePicker",_e5b,this.containerNode,"child");

這行代碼，是一個DatePicker小組件。

因此搜索DatePicker，找到了

dojo.provide("dojo.widget.DatePicker");

找到setDate函數，發現調用了this._preInitUI函數，繼續查找，最終在_preInitUI函數中發現了

if(_e14<this.startDate||_e14>this.endDate){
_e14=new Date((_e14<this.startDate)?this.startDate:this.endDate);
}

只對日期大小作了校驗，而沒有對日期的""作校驗，緣由就在這裏了。因此在

if(_e14<this.startDate||_e14>this.endDate){

以前加入

if(_e14==""){
_e14=new Date();
}
修改後的先後代碼大概以下：

this.startDate.setHours(0,0,0,0);
this.endDate.setHours(24,0,0,-1);
if(_e14==""){
_e14=new Date();
}
if(_e14<this.startDate||_e14>this.endDate){
_e14=new Date((_e14<this.startDate)?this.startDate:this.endDate);
}

測試一下，一切OK，到此完滿解決。

最終的解決辦法

找到使用的
struts2-dojo-plugin-2.1.8.1.jar
解壓縮到struts2-dojo-plugin-2.1.8.1文件夾，而後找到
struts2-dojo-plugin-2.1.8.1\org\apache\struts2\static\dojo
下的struts_dojo.js文件。

打開文件

找到
dojo.provide("dojo.widget.DatePicker");

而後往下找到
if(_e14<this.startDate||_e14>this.endDate){
_e14=new Date((_e14<this.startDate)?this.startDate:this.endDate);
}

在其前面添加
if(_e14==""){
_e14=new Date();
}
保存。

而後使用winrar或者winzip，進入struts2-dojo-plugin-2.1.8.1文件夾，將選擇該文件夾下的全部文件壓縮，注意選擇zip格式壓縮，壓縮好以後，修改成將.zip修改成.jar便可。

好了，如今覆蓋項目中對應的jar包，從新部署便可。測試的時候，注意清空瀏覽器的緩存，而後刷新便可。不然，仍是bug時候的struts-dojo.js文件在客戶端