一般我们经常需要在将服务器端的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. SQL Server 2012：SQL Server体系结构——一个查询的生命周期（第2部分）

    计划缓存(Plan Cache) 如果SQL Server已经找到一个好的方式去执行一段代码时,应该把它作为随后的请求重用,因为生成执行计划是耗费时间且资源密集的,这样做是有有意义的. 如果没找到被缓 ...

  2. iOS性能优化之内存管理：Analyze、Leaks、Allocations的使用和案例代码

    最近接了个小任务,和公司的iOS小伙伴们分享下instruments的具体使用,于是有了这篇博客...性能优化是一个很大的话题,这里讨论的主要是内存泄露部分. 一. 一些相关概念 很多人应该比较了解这 ...

  3. Entity FrameWork 延迟加载本质（二）

    1.对于外键实体而言,EF会在用到这个外键属性的时候,才会去查对应的表.这就是按需加载了... 2.按需加载的缺点:每次调用外键实体的时候,都会去查询数据库(EF有小优化:相同的外键实体只查一次) I ...

  4. java 接口学习

    你应该知道接口是一种契约,它与实现方式无关 但是类,即使是抽象类,你都能自定义成员变量,而成员变量往往就与实现方式有关. 这一点的实际意义不大. 但是有一点,类会暴露太多不必要,甚至不能暴露的东西,你 ...

  5. C#获取url中参数键值对的方法

    方法如下: /// <summary> /// 遍历Url中的参数列表 /// </summary> /// <returns>如:(?userName=keley ...

  6. 最小化安装centos7下配置网络

    虚拟机操作系统:centos7.0 命令行模式 1.首先明确centos7在最小化安装完是不支持上网的,相应的查看网络以及修改网络参数是不能使用的,最常见的就是我们常用的ifconfig. 2.找到网 ...

  7. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...

  8. Android5.0新特性——全新的动画（animation）

    全新的动画 在Material Design设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性.Material主题为控件和Activity的过渡提供了一些默认的动画,在android ...

  9. A除以B问题

    描述:本题要求计算A/B,其中A是不超过1000位的正整数,B是1位正整数.你需要输出商数Q和余数R,使得A = B * Q + R成立. 输入:输入在1行中依次给出A和B,中间以1空格分隔. 输出: ...

  10. windows上JSP开发环境全搭建

    JSP开发环境全搭建 最近需要用到JSP做项目,所以要配置JSP的开发环境,总结一下配置步骤以备以后再配置需要. 配置JAVA开发环境,配置JDK 下载JDK,在这里下载开发所需的JDK,可以根据自己 ...