一般我們經常需要在將服務器端的Date類型，傳到頁面進行顯示，這就涉及到一個如何格式化顯示Date類型的問題，一般我們有三種方式進行：
1）在服務端使用SimpleDateFormat等類格式化成字符串，然后傳給客戶端，這樣的話，需要將Date類型修改為String,或者增加一個String字段專門保存Date的字符串；
2）使用jstl的fmt標簽庫進行格式化，缺點是只能在jsp頁面中進行，html頁面就無能為力了，而且要導入標簽；
3）在客戶端使用javascript進行格式化，這種方式任何時候都能夠很好的處理；
下面直接上代碼：
<%@ page language="java" import="java.util.*,java.text.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="js,date,format">
<meta name="description" content="js date format">
<title>js date format</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrapper{margin:50px auto;width:300px;border:1px solid green;}
#wrapper div + div{margin:2px 0 0 2px;border-top:1px solid gray;}
#wrapper div:nth-child(even){color:#666;}
</style>
</head>
<body>
<%
Date birthday = new Date();
request.setAttribute("birthday", birthday);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String birthStr = sdf.format(birthday);
request.setAttribute("birthStr", birthStr);
out.println(birthday);
%>
<div id="wrapper">
<div id="dateformat"></div>
<div id="dateformat2"></div>
<div id="dateformat3"></div>
<div id="dateformat4"></div>
<div id="dateformat5"></div>
<div id="dateformat6"><c:out value="${birthday}"/></div>
<div id="dateformat7"><fmt:formatDate value="${birthday}" pattern="yyyy-MM-dd"/></div>
<div id="dateformat8"></div>
<div id="dateformat9"><c:out value="${birthStr}"/></div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), //日
"H+": this.getHours(), //24小時制
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //12小時制
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
: (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var time1 = new Date().format("yyyy-MM-dd");
var time2 = new Date().format("yyyy-MM-dd hh:mm:ss");
var time3 = new Date().format("yyyy-MM-dd HH:mm:ss");
var time4 = new Date().format("yyyy-MM-dd HH:mm:ss S");
var time5 = new Date(1145667888).format("yyyy-MM-dd HH:mm:ss S");
$("#dateformat").text(time1);
$("#dateformat2").text(time2);
$("#dateformat3").text(time3);
$("#dateformat4").text(time4);
$("#dateformat5").text(time5);
$("#dateformat8").text(new Date("${birthday}").format("yyyy-MM-dd HH:mm:ss S"));
</script>
</body>
</html>
上面代碼演示了三種方法來進行Date類型的字段如何在頁面上格式化顯示的問題。效果如下：
上面的代碼有幾點值得注意：
1）有時我們傳的是json格式的Date類型，此時傳遞的其實是毫秒數，也可以利用javascript進行格式化：new Date(1145667888).format("yyyy-MM-dd HH:mm:ss S");
2）#wrapper div + div{margin:2px 0 0 2px;border-top:1px solid gray;} 這是一個非第一個選擇符，意思是，#wrapper下的第一個div緊鄰的所有的div，也就是#wrapper下的除了第一個div之外的div， 設置他們的 border-top，來顯示成下划線的效果；
3）#wrapper div:nth-child(even){color:#666;} 這是一個CSS的偽選擇符，相似的還有 :first-child :last-child :nth-child(3) :nth-child(odd)，對應到jquery中也有相似的東西；
4）js格式化Date的處理，是通過在其原型上增加方法 Date.prototype.format 來進行的；