java web中日期Date类型在页面中格式化显示的三种方式
一般我们经常需要在将服务器端的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类型在页面中格式化显示的三种方式的更多相关文章
- 将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种方式
Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...
- WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式
原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章介绍在WPF中实现PropertyGr ...
- spring boot @ResponseBody转换JSON 时 Date 类型处理方法，Jackson和FastJson两种方式,springboot 2.0.9配置fastjson不生效官方解决办法
spring boot @ResponseBody转换JSON 时 Date 类型处理方法 ,这里一共有两种不同解析方式(Jackson和FastJson两种方式,springboot我用的1.x的版 ...
- c语言中字符串数组初始化的一点总结&& c++访问控制的三种方式
char *c[]={"ONE","TWO","THREE","FOUR"}; // c语言中定义了一个字符串数组(也称 ...
- java中的date类型转换为js中的日期显示 我改
function dateChange(javaDate){ if(javaDate){ return javaDate.substr(0,10).replace(/-/g,"/" ...
- js,jsp里将数据库Date类型获取出来后格式化显示于界面
js:new Date(rowdata.updateTime).format("yyyy-MM-dd hh:mm:ss") jsp: <fmt:formatDate valu ...
- JQuery的几种页面加载完执行三种方式
jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...
- 使用javascript实现在页面打印的效果的三种方式
<div id="console"></div> <script type="text/javascript"> var c ...
- es中的date类型
JSON中没有date类型,es中的date可以由下面3种方式表示: ①格式化的date字符串,例如"2018-01-01"或者"2018-01-01 12:00:00& ...
随机推荐
- listbox里面添加WrapPanel ,支持自适应换行
listbox大家都会用,如果要让它支持换行操作还必须加上 ListBox.ItemsPanel ItemsPanelTemplate toolkit:WrapPanel/ /ItemsPanelTe ...
- [水煮 ASP.NET Web API 2 方法论] 目 录
一.ASP.NET 中的 Web API [水煮 ASP.NET Web API2 方法论](1-1)在MVC 应用程序中添加 ASP.NET Web API 与 ASP.NET MVC 在同一个进程 ...
- Chrome弹窗的简单应用（选择结构与循环结构）
★选择结构★ ★JS实现弹窗显示随机数 示例代码效果图 ★ 弹窗实现对随机数的进一步判断 示例代码效果图 ★综合应用 比较大小 ★ 判断成绩等级 ): : : : : alert(" ...
- SQL Server 2008 评估期已过解决方法
SQL Server 2008有180天的试用期,过期后会提示“评估期已过”的提示. 1.进入SQL Server安装中心: 2.选择“维护”-“版本升级” 3.输入密钥: 其他的根据提示操作. 附S ...
- 2. npm 的使用
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...
- 不可或缺 Windows Native (2) - C 语言: 常量，变量，基本数据类型
[源码下载] 不可或缺 Windows Native (2) - C 语言: 常量,变量,基本数据类型 作者:webabcd 介绍不可或缺 Windows Native 之 C 语言 常量 变量 基本 ...
- JAVA多用户商城系统源码
最近公司要搞商城,让我多方咨询,最后看了很多,要不就是代码注释不全,要不就是bug多,要么就是文档缺少,最后决定自己开发一套商城. 下面是开发的一些心得体会,权且记录下来,给自己做个记录把. 网址 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现（三）
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...
- 什么是CSR证书申请文件？
CSR是Cerificate Signing Request的英文缩写,即证书请求文件,在多方之间在互联网上安全分享数据的公钥基础架构PKI系统中,CSR文件必须在申请和购买SSL证书之前创建.也 ...
- mac下eclipse的svn（即svn插件）怎么切换账号？
以mac os x为例(Unix/Linux类似) 打开命令行窗口,即用户的根目录(用户的home目录) cd ~ 即可进入home目录. 执行命令 ls -al 会列出home目录下的所有文件及文件 ...