一般我们经常需要在将服务器端的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 来进行的；

java web中日期Date类型在页面中格式化显示的三种方式的更多相关文章

  1. 将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种方式

    Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...

  2. WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式

    原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章介绍在WPF中实现PropertyGr ...

  3. spring boot @ResponseBody转换JSON 时 Date 类型处理方法，Jackson和FastJson两种方式,springboot 2.0.9配置fastjson不生效官方解决办法

    spring boot @ResponseBody转换JSON 时 Date 类型处理方法 ,这里一共有两种不同解析方式(Jackson和FastJson两种方式,springboot我用的1.x的版 ...

  4. c语言中字符串数组初始化的一点总结&& c++访问控制的三种方式

    char *c[]={"ONE","TWO","THREE","FOUR"}; // c语言中定义了一个字符串数组(也称 ...

  5. java中的date类型转换为js中的日期显示 我改

    function dateChange(javaDate){ if(javaDate){ return javaDate.substr(0,10).replace(/-/g,"/" ...

  6. js,jsp里将数据库Date类型获取出来后格式化显示于界面

    js:new Date(rowdata.updateTime).format("yyyy-MM-dd hh:mm:ss") jsp: <fmt:formatDate valu ...

  7. JQuery的几种页面加载完执行三种方式

      jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...

  8. 使用javascript实现在页面打印的效果的三种方式

    <div id="console"></div> <script type="text/javascript"> var c ...

  9. es中的date类型

    JSON中没有date类型,es中的date可以由下面3种方式表示: ①格式化的date字符串,例如"2018-01-01"或者"2018-01-01 12:00:00& ...

随机推荐

  1. ASP.NET跨服务器上传文件的相关解决方案

    第一种:通过FTP来上传文件 首先,在另外一台服务器上设置好FTP服务,并创建好允许上传的用户和密码,然后,在ASP.NET里就可以直接将文件上传到这台 FTP 服务器上了.代码如下: <%@ ...

  2. 转载：第三弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！

    感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友.目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧.最近这个教程搞得我也心力交瘁了,虽然苦逼, ...

  3. Java中接口式的匿名内部类的构造方法

    在使用多线程的时候,时常会使用两种方式实现,一种是直接继承Thread类来实现多线程,另外一种就是实现Runnable接口. 我们都知道,接口是没有构造方法的,同时匿名内部类也是没有构造方法的.原因有 ...

  4. mysqldump导出部分数据的方法： 加入--where参数

    mysqldump导出部分数据的方法: 加入--where参数 mysqldump -u用户名 -p密码 数据库名 表名 --where="筛选条件" > 导出文件路径 my ...

  5. IE11之F12 Developer Tools--调试器(Debugger)

    使用调试器工具在代码运行时对其导航.设置监视点和断点,查看调用堆栈,以及提高编译/精简JavaScript的可读性. 调试器可以帮助你了解为何你的代码片段会出现未按照预期方式运行.未在预期时间运行及在 ...

  6. [Solution] Microsoft Windows 服务(3) 使用Quartz.net定时任务

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,Quartz.net 就是Quartz的移植版本.Quartz可以用来创建简单或为运行十个,百个,甚至是 ...

  7. SpringMVC基础——一个简单的例子

    一.导入 jar 包 二.配置 web.xml 文件 <servlet> <servlet-name>dispatcherServlet</servlet-name> ...

  8. 返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性

    [索引页][源码下载] 返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性 作者:webabcd 介绍asp.net mvc 之 asp.net mvc 5.0 新 ...

  9. 百度FIS入门

    1.fis作为nodejs的模块来管理的,所以首先得安装nodejs,看我前面的安装nodejs的文章. 2.官方的案例下载包https://github.com/hefangshi/fis-quic ...

  10. 关于HTML的编码问题

    平时我在写html文件时,很容易忘掉这个文件的编码类型,<meta charset=”utf-8”> 的语句,因为编辑器默认设置了一个编码,所以在我没有写编码格式设置语句的情况下,效果依然 ...