java web中日期Date类型在页面中格式化显示的三种方式

2023-12-22 01:34:33

一般我们经常需要在将服务器端的Date类型，传到页面进行显示，这就涉及到一个如何格式化显示Date类型的问题，一般我们有三种方式进行：

1）在服务端使用SimpleDateFormat等类格式化成字符串，然后传给客户端，这样的话，需要将Date类型修改为String,或者增加一个String字段专门保存Date的字符串；

2）使用jstl的fmt标签库进行格式化，缺点是只能在jsp页面中进行，html页面就无能为力了，而且要导入标签；

3）在客户端使用javascript进行格式化，这种方式任何时候都能够很好的处理；

下面直接上代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<%@ 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 来进行的；

文章来源:https://blog.csdn.net/omygodvv/article/details/135141155
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。