一般我们经常需要在将服务器端的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. 一秒钟生成自己的iOS客户端

    原谅我这个标题党 想当年我也是亲自学过几天Objective-c的程序猿,我一眼就知道我是在骗人,但那有怎样呢!还不是满大街都是各种<十分钟让你明白Objective-C的语法>.< ...

  2. SQL语句技巧：查询时巧用OR实现逻辑判断

    首先看以下SQL逻辑语句块: ) ) SET @fieldname='chassisno' --这里可传入chassisno,plateno,owner,contacttelno其中之一或不传 SET ...

  3. zabbix配fpmmm(mpm)数据传送不了问题解决

    我们环境用zabbix mpm来监控mysql,不过最近官网已经不叫mpm了,而是叫fpmmm,理由为: fpmmm is the successor of mpm. mpm was renamed ...

  4. office2016 软件全集 官方下载免费完整版(含破解文件)不含垃圾软件 win10完美激活

    office2016官方下载免费完整版是新一代办公软件,office2016官方下载免费完整版已经分享到下面,office2016官方下载免费完整版包括了Word.Excel.PowerPoint.O ...

  5. P6 EPPM 16 R1 文档和帮助系统

    P6 EPPM 16 R1 文档和帮助系统 https://docs.oracle.com/cd/E74894_01/ http://docs.oracle.com/cd/E68202_01/clie ...

  6. C#设计模式——桥接模式(Bridge Pattern)

    一.概述在软件开发中,我们有时候会遇上一个对象具有多个变化维度.比如对汽车对象来说,可能存在不同的汽车类型,如公共汽车.轿车等,也可能存在不同的发动机,如汽油发动机.柴油发动机等.对这类对象,可应用桥 ...

  7. c#重点[集合类型]异常,数组，集合ArrayList,List<>,hashTable,hashtable泛型(Dictionary)

    1.foreach[对一些数组或集合进行遍历] foreach(类型 变量名 in 集合对象){语句体} //定义一个数组 ,,,,, }; foreach(var i in sNum1) { Con ...

  8. C# 通用验证类 支持 WPF,MVC,Winform

    验证方式,   通过继承 IDataErrorInfo接口 和 DataAnnotations 解释标记语言而实现, 为了能在WPF上通用,所了也要继承属性更改通知接口INotifyPropertyC ...

  9. windows下react-native环境搭建

    首先不得不先吐槽一下自己,一个坑总是踩很多次,且乐此不疲. 咋办? 写博客记录记录呗. 零.记录的点 Java环境的下载与配置 Android环境的下载与配置 Node环境的下载与配置 创建第一个re ...

  10. 性能分析之-- JAVA Thread Dump 分析综述

    性能分析之-- JAVA Thread Dump 分析综述       一.Thread Dump介绍 1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工 ...