一般我们经常需要在将服务器端的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. Win10 + VS2015 下编译 Qt5.6.0

    近期由于另外一个项目需要用 vs2015 ,于是把 Qt 也升级到了 5.6.0 .由于项目需要兼容 Windows xp ,所以需要自己编译 Qt .这里大致整理一下编译的过程. 安装 Active ...

  2. 连续值的CART（分类回归树）原理和实现

    上一篇我们学习和实现了CART(分类回归树),不过主要是针对离散值的分类实现,下面我们来看下连续值的cart分类树如何实现 思考连续值和离散值的不同之处: 二分子树的时候不同:离散值需要求出最优的两个 ...

  3. [转]easyui datagrid 批量编辑和提交

    web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...

  4. 淘宝API开发系列---阿里.聚石塔.开放平台的使用

    好久没有继续跟进淘宝的API使用了,有很多做相关应用的同行都来咨询,很多都因为自己开发工作比较忙而没有来得及好的处理,前几天,有一个朋友叫帮忙指导如何使用淘宝API,由于原来有一些成熟的例子应用,因此 ...

  5. 【Asphyre引擎】学习笔记（一）

    先来说说一下几个最基本的对象: TGraphicsDeviceProvider:这个对象决定我们的游戏是用什么来渲染的,比如DX或者OpenGL,DX还有多个版本可以选择. TCustomSwapCh ...

  6. 微软发布ASP.NET 5路线图

    这次随 Visual Studio 2015 发布的 ASP.NET 版本是 ASP.NET 4.6 与 ASP.NET 5 beta5.在 VS2015 发布的同时,微软也发布了 ASP.NET 5 ...

  7. j2ee log4j集中式日志解决方案logpool-v0.4发布说明

    logpool v0.4发布说明: 1.持久化采用mongodb非结构化存储实现,以满足后续调整的灵活需要:

  8. C# Winform 窗体美化

    using System; using System.ComponentModel; using System.Diagnostics; using System.Drawing; using Sys ...

  9. (四)play之yabe项目【页面】

    (四)play之yabe项目[页面] 博客分类: 框架@play framework   主页面 显示当前发表博客的完整内容,以及历史博客列表 Bootstrap Job 一个play job任务就是 ...

  10. PlayFramework 1 自定义标签 -- FastTags http://unmi.cc/category/javajee/playframework/

    最早是用 HTML 来自定义标签,现在觉得 HTML 写有关逻辑的代码就有点不伦不类了,HTML 里着重是显示代码.前有一篇  PlayFramework 1 模板应用 -- Java 对象扩展 学习 ...