项目采用的SSM框架。
前台输入date数据，form提交表单是当做String类型传输到后台，后台接收到这个String类型的date日期，因为我们pojo中date日期是使用的Date类型，而不是String，所以不能正确封装。会导致400异常。控制台显示如下：
org.springframework.core.convert.ConversionFailedException:
Failed to convert from type java.lang.String to type java.util.Date for value ‘2017-12-06‘; nested exception is java.lang.IllegalArgumentException]
----------------------------------
依上得知，我们的后台就需要将接收的string类型的日期转换成Date类型，才能正常封装。我使用了下面的代码：
在Controller中写入：
1 DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); 2 dateFormat.setLenient(true); 3 binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
这样就没问题了。
--------------------------------------------
jsp日期时间插件的 使用
在前台jsp中手动输入date类型是不方便的。所以有的浏览器支持了html5的<input type="date"/>时间日期插件，但是有的浏览器却没有。为了避免这种不规范，我们自己准备了时间日期插件，放到jsp中使用
名称：WdatePicker.js
代码：
1 /* 2 * My97 DatePicker 4.1 3 * SITE: http://dp.my97.net 4 * BLOG: http://my97.cnblogs.com 5 * MAIL: smallcarrot@163.com 6 */ 7 var $dp, WdatePicker; 8 (function() { 9 var $ = { 10 11 $wdate : true, 12 $crossFrame : true, 13 $dpPath : "", 14 position : {}, 15 lang : "auto", 16 skin : "default", 17 dateFmt : "yyyy-MM-dd", 18 realDateFmt : "yyyy-MM-dd", 19 realTimeFmt : "HH:mm:ss", 20 realFullFmt : "%Date %Time", 21 minDate : "1900-01-01 00:00:00", 22 maxDate : "2099-12-31 23:59:59", 23 startDate : "", 24 alwaysUseStartDate : false, 25 yearOffset : 1911, 26 isShowWeek : false, 27 highLineWeekDay : true, 28 isShowClear : true, 29 isShowToday : true, 30 isShowOthers : true, 31 readOnly : false, 32 errDealMode : 0, 33 autoPickDate : true, 34 qsEnabled : true, 35 36 disabledDates : null, 37 disabledDays : null, 38 opposite : false, 39 onpicking : null, 40 onpicked : null, 41 onclearing : null, 42 oncleared : null, 43 eCont : null, 44 vel : null, 45 errMsg : "", 46 quickSel : [], 47 has : {} 48 }; 49 WdatePicker = S; 50 var V = window, N = "document", H = "documentElement", A = "getElementsByTagName", T, _, R, G, a; 51 switch (navigator.appName) { 52 case "Microsoft Internet Explorer": 53 R = true; 54 break; 55 case "Opera": 56 a = true; 57 break; 58 default: 59 G = true; 60 break 61 } 62 T = V; 63 if ($.$crossFrame) { 64 try { 65 while (T.parent[N] != T[N] 66 && T.parent[N][A]("frameset").length == 0) 67 T = T.parent 68 } catch (P) { 69 } 70 } 71 _ = J(); 72 if ($.$wdate) 73 K(_ + "skin/WdatePicker.css"); 74 var L; 75 if (T.$dp) { 76 try { 77 T.$dp.$("my97") 78 } catch (P) { 79 L = P.number == -2146823277 ? true : false 80 } 81 } 82 if (!T.$dp || L) { 83 $dp = Q({ 84 ff : G, 85 ie : R, 86 opera : a, 87 el : null, 88 win : V, 89 status : L ? 2 : 0, 90 defMinDate : $.minDate, 91 defMaxDate : $.maxDate, 92 $ : function($) { 93 return (typeof $ == "string") ? this.win[N].getElementById($) 94 : $ 95 }, 96 $D : function($, _) { 97 return this.$DV(this.$($).value, _) 98 }, 99 $DV : function(_, $) { 100 if (_ != "") { 101 this.dt = $dp.cal.splitDate(_, $dp.cal.dateFmt); 102 if ($) 103 for ( var A in $) { 104 if (this.dt[A] === undefined) 105 this.errMsg = "invalid property:" + A; 106 this.dt[A] += $[A] 107 } 108 if (this.dt.refresh()) 109 return this.dt 110 } 111 return "" 112 }, 113 show : function() { 114 if (this.dd) 115 this.dd.style.display = "block" 116 }, 117 hide : function() { 118 if (this.dd) 119 this.dd.style.display = "none" 120 }, 121 attachEvent : C 122 }); 123 if (!L) 124 Z(T, function() { 125 S(null, true) 126 }) 127 } else 128 $dp = T.$dp; 129 if (!V[N].docMD) { 130 C(V[N], "onmousedown", B); 131 V[N].docMD = true 132 } 133 if (!T[N].docMD) { 134 C(T[N], "onmousedown", B); 135 T[N].docMD = true 136 } 137 C(V, "onunload", function() { 138 $dp.hide() 139 }); 140 function Q(_) { 141 T.$dp = T.$dp || {}; 142 for ( var $ in _) 143 T.$dp[$] = _[$]; 144 return T.$dp 145 } 146 function C(A, $, _) { 147 if (R) 148 A.attachEvent($, _); 149 else { 150 var B = $.replace(/on/, ""); 151 _._ieEmuEventHandler = function($) { 152 return _($) 153 }; 154 A.addEventListener(B, _._ieEmuEventHandler, false) 155 } 156 } 157 function J() { 158 var _, A, $ = document.getElementsByTagName("script"); 159 for (var B = 0; B < $.length; B++) { 160 _ = $[B].src.substring(0, $[B].src.toLowerCase().indexOf( 161 "wdatepicker.js")); 162 A = _.lastIndexOf("/"); 163 if (A > 0) 164 _ = _.substring(0, A + 1); 165 if (_) 166 break 167 } 168 return _ 169 } 170 function D(F) { 171 var E, C; 172 if (F.substring(0, 1) != "/" && F.indexOf("://") == -1) { 173 E = T.location.href; 174 C = location.href; 175 if (E.indexOf("?") > -1) 176 E = E.substring(0, E.indexOf("?")); 177 if (C.indexOf("?") > -1) 178 C = C.substring(0, C.indexOf("?")); 179 var _ = "", D = "", A = "", H, G, B = ""; 180 for (H = 0; H < Math.max(E.length, C.length); H++) 181 if (E.charAt(H).toLowerCase() != C.charAt(H).toLowerCase()) { 182 G = H; 183 while (E.charAt(G) != "/") { 184 if (G == 0) 185 break; 186 G -= 1 187 } 188 _ = E.substring(G + 1, E.length); 189 _ = _.substring(0, _.lastIndexOf("/")); 190 D = C.substring(G + 1, C.length); 191 D = D.substring(0, D.lastIndexOf("/")); 192 break 193 } 194 if (_ != "") 195 for (H = 0; H < _.split("/").length; H++) 196 B += "../"; 197 if (D != "") 198 B += D + "/"; 199 F = E.substring(0, E.lastIndexOf("/") + 1) + B + F 200 } 201 $.$dpPath = F 202 } 203 function K(C, $, D) { 204 var B = V[N], E = B[A]("HEAD").item(0), _ = B.createElement("link"); 205 _.href = C; 206 _.rel = "stylesheet"; 207 _.type = "text/css"; 208 if ($) 209 _.title = $; 210 if (D) 211 _.charset = D; 212 E.appendChild(_) 213 } 214 function X($, _) { 215 C($, "onload", _) 216 } 217 function Z(_, $) { 218 var B = _.document, D = false; 219 F(); 220 if ((/WebKit|KHTML|MSIE/i).test(navigator.userAgent)) 221 C(); 222 function E(_) { 223 if (!D) { 224 D = true; 225 A(); 226 $(_) 227 } 228 } 229 function G($) { 230 return typeof B[$] != "undefined" 231 } 232 function C() { 233 if (B.body !== null && B.getElementsByTagName) { 234 if (G("fileSize")) { 235 try { 236 B.documentElement.doScroll("left"); 237 E("documentready") 238 } catch ($) { 239 } 240 } 241 if (G("readyState") && (/loaded|complete/).test(B.readyState)) 242 E("readyState") 243 } 244 if (!D) 245 setTimeout(C, 10) 246 } 247 function A() { 248 if (typeof B.removeEventListener == "function") 249 B.removeEventListener("DOMContentLoaded", E, false) 250 } 251 function F() { 252 if (typeof B.addEventListener == "function") 253 B.addEventListener("DOMContentLoaded", E, false); 254 var $ = _.onload; 255 _.onload = function(_) { 256 if (typeof $ == "function") 257 $(); 258 E(_ || this.event) 259 } 260 } 261 } 262 function E($) { 263 $ = $ || T; 264 var B = 0, _ = 0; 265 while ($ != T) { 266 var D = $.parent[N][A]("iframe"); 267 for (var F = 0; F < D.length; F++) { 268 try { 269 if (D[F].contentWindow == $) { 270 var E = U(D[F]); 271 B += E.left; 272 _ += E.top; 273 break 274 } 275 } catch (C) { 276 } 277 } 278 $ = $.parent 279 } 280 return { 281 "leftM" : B, 282 "topM" : _ 283 } 284 } 285 function U(E) { 286 if (R) 287 return E.getBoundingClientRect(); 288 else { 289 var A = { 290 ROOT_TAG : /^body|html$/i, 291 OP_SCROLL : /^(?:inline|table-row)$/i 292 }, G = null, _ = E.offsetTop, F = E.offsetLeft, D = E.offsetWidth, B = E.offsetHeight, C = E.offsetParent; 293 if (C != E) 294 while (C) { 295 F += C.offsetLeft; 296 _ += C.offsetTop; 297 if (C.tagName.toLowerCase() == "body") 298 G = C.ownerDocument.defaultView; 299 C = C.offsetParent 300 } 301 C = E.parentNode; 302 while (C.tagName && !A.ROOT_TAG.test(C.tagName)) { 303 if (C.scrollTop || C.scrollLeft) 304 if (!A.OP_SCROLL.test(C.style.display)) 305 if (!a || C.style.overflow !== "visible") { 306 F -= C.scrollLeft; 307 _ -= C.scrollTop 308 } 309 C = C.parentNode 310 } 311 var $ = Y(G); 312 F -= $.left; 313 _ -= $.top; 314 D += F; 315 B += _; 316 return { 317 "left" : F, 318 "top" : _, 319 "right" : D, 320 "bottom" : B 321 } 322 } 323 } 324 function M($) { 325 $ = $ || T; 326 var _ = $[N]; 327 _ = _[H] && _[H].clientHeight 328 && _[H].clientHeight <= _.body.clientHeight ? _[H] : _.body; 329 return { 330 "width" : _.clientWidth, 331 "height" : _.clientHeight 332 } 333 } 334 function Y($) { 335 $ = $ || T; 336 var B = $[N], A = B[H], _ = B.body; 337 B = (A && A.scrollTop != null && (A.scrollTop > _.scrollLeft || A.scrollLeft > _.scrollLeft)) ? A 338 : _; 339 return { 340 "top" : B.scrollTop, 341 "left" : B.scrollLeft 342 } 343 } 344 function B(_) { 345 src = _ ? (_.srcElement || _.target) : null; 346 if ($dp && $dp.dd && $dp.dd.style.display == "block" && src != $dp.el) { 347 var A = $dp.el, B = $dp.cal, $ = $dp.el[$dp.elProp]; 348 if ($ != null) { 349 $dp.$w.hideSel(); 350 if ($ != "" && !$dp.readOnly) 351 B.date.loadFromDate(B.splitDate($, B.dateFmt)); 352 if ($ == "" 353 || (B.isDate(B.date) && B.isTime(B.date) && B 354 .checkValid(B.date))) { 355 B.mark(true); 356 if ($ != "") 357 B.update(); 358 else 359 B.setRealValue(""); 360 $dp.hide() 361 } else 362 B.mark(false) 363 } else 364 $dp.hide() 365 } 366 } 367 var O = []; 368 function W() { 369 $dp.status = 2; 370 F() 371 } 372 function F() { 373 if (O.length > 0) { 374 var $ = O.shift(); 375 $.el = { 376 innerHTML : "" 377 }; 378 $.eCont = $dp.$($.eCont); 379 $.autoPickDate = true; 380 $.qsEnabled = false; 381 I($) 382 } 383 } 384 function S(C, $) { 385 $dp.win = V; 386 C = C || {}; 387 if ($) { 388 $dp.status = 1; 389 I({ 390 el : { 391 innerHTML : "" 392 } 393 }, true) 394 } else if (C.eCont) { 395 O.push(C); 396 if ($dp.status == 2) 397 F() 398 } else { 399 if ($dp.status == 0) 400 $dp.status = 1; 401 else if ($dp.status != 2) 402 return; 403 var B, A = _(); 404 if (A) { 405 B = A.srcElement || A.target; 406 A.cancelBubble = true 407 } 408 C.el = $dp.$(C.el || B); 409 if (!C.el 410 || C.el 411 && C.el.disabled 412 || (C.el == $dp.el && $dp.dd.style.display != "none" && $dp.dd.style.left != "-1970px")) 413 return; 414 I(C) 415 } 416 function _() { 417 if (G) { 418 func = _.caller; 419 while (func != null) { 420 var $ = func.arguments[0]; 421 if ($ && ($ + "").indexOf("Event") >= 0) 422 return $; 423 func = func.caller 424 } 425 return null 426 } 427 return event 428 } 429 } 430 function I(G, A) { 431 for ( var F in $) 432 if (F.substring(0, 1) != "$") 433 $dp[F] = $[F]; 434 for (F in G) 435 if ($dp[F] === undefined) 436 $dp.errMsg = "invalid property:" + F; 437 else 438 $dp[F] = G[F]; 439 $dp.elProp = $dp.el && $dp.el.nodeName == "INPUT" ? "value" 440 : "innerHTML"; 441 if ($dp.el[$dp.elProp] == null) 442 return; 443 if ($dp.lang == "auto") 444 $dp.lang = R ? navigator.browserLanguage.toLowerCase() 445 : navigator.language.toLowerCase(); 446 if (!$dp.dd || $dp.eCont 447 || ($dp.lang && $dp.realLang && $dp.realLang.name != $dp.lang)) { 448 if ($dp.dd && !$dp.eCont) 449 T[N].body.removeChild($dp.dd); 450 if ($.$dpPath == "") 451 D(_); 452 var B = "<iframe src=\"" 453 + $.$dpPath 454 + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>"; 455 if ($dp.eCont) { 456 $dp.eCont.innerHTML = B; 457 X($dp.eCont.childNodes[0], W) 458 } else { 459 $dp.dd = T[N].createElement("DIV"); 460 $dp.dd.style.cssText = "position:absolute;z-index:19700"; 461 $dp.dd.innerHTML = B; 462 T[N].body.appendChild($dp.dd); 463 X($dp.dd.childNodes[0], W); 464 if (A) 465 $dp.dd.style.left = $dp.dd.style.top = "-1970px"; 466 else { 467 $dp.show(); 468 C() 469 } 470 } 471 } else if ($dp.cal) { 472 $dp.show(); 473 $dp.cal.init(); 474 C() 475 } 476 function C() { 477 var F = $dp.position.left, B = $dp.position.top, G = U($dp.el), $ = E(V), C = M(T), A = Y(T), D = $dp.dd.offsetHeight, _ = $dp.dd.offsetWidth; 478 if (isNaN(B)) { 479 if (B == "above" 480 || (B != "under" && (($.topM + G.bottom + D > C.height) && ($.topM 481 + G.top - D > -5)))) 482 B = A.top + $.topM + G.top - D - 3; 483 else 484 B = A.top + $.topM + G.bottom; 485 B += R ? -1 : 1 486 } else 487 B += A.top + $.topM; 488 if (isNaN(F)) 489 F = A.left + Math.min($.leftM + G.left, C.width - _ - 5) 490 - (R ? 2 : 0); 491 else 492 F += A.left + $.leftM; 493 $dp.dd.style.top = B + "px"; 494 $dp.dd.style.left = F + "px" 495 } 496 } 497 })()
拷贝不下来就自己百度一个
前端jsp展示页面中引入此js：
<script type="text/javascript" src="${ctx}/staticfile/js/datepicker/WdatePicker.js"></script>
在标签中使用此js就可以正常展示了。例如：
1 <td class="tableHeader">入职日期</td> 2 <td> 3 <input type="text" style="width:120px;" name="userInfo.joinDate" 4 onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:‘yyyy-MM-dd‘});"/> 5 </td>
--------------------------------------------------------------------------------------------
前台展示date格式数据方法：
date格式很奇怪，没法看，
我们使用<fmt:formatDate/> 进行转换成本地语言进行展示，如下操作
<td class="tableHeader">入职日期:</td>
<td><fmt:formatDate value="${user.userInfo.joinDate}" pattern="yyyy-MM-dd"/></td>
就可以按着格式进行转换了。
----------------------------------------------------------------
这要是还看不懂，我也没办法了。
