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

原创 于 2023-12-21 21:50:20 发布 · 1.3k 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #前端 #开发语言

本文介绍了在Web开发中如何在服务器端和客户端对Date类型进行格式化的三种方式，包括使用SimpleDateFormat，JSTLfmt标签库以及JavaScript处理，还提到了处理JSON传输的毫秒数和CSS样式应用。

一般我们经常需要在将服务器端的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 来进行的；

Date 类（日期类），SimpleDateFormat 类 （格式化日期），Calendar 类（日历类），NumberFormat 类 （数值格式化）
qq_45022216的博客
09-27 776
1、Date 类 ava.util.Date类封装了日期和时间信息。 Date 是表示时间实例的一个类，它的精度为毫秒。 Date类的大多数用于进行时间分量计算的方法已经被Calendar取代。 Date 对象初始化 Date d1 = new Date(); //Date() 分配 Date 对象并初始化此对象，以表示分配它的时间（精确到毫秒） Date d3 = new Date(100, 2, 21); //从1900年算起，负值往前推，正值大于对应时间范围往后推，月份以0-11计
SpringBoot：几种常用的接口日期格式化方法
最新发布
web13508588635的博客
02-15 1019
在 Spring Boot 中，可以使用自定义参数转换器实现日期格式化。public?class?????@Bean????public?LocalDate>?????????return?new?????????????@Override????????????public?LocalDate?source)?????????????????return?????????????????????????????@Bean????public?????????return?new????????
java格式化Date类型，遍历日期
12-20
java实现格式化Date类型，输入Date输出Date。遍历日期
DateUtil.java
04-19
基于Java 日期转换类: 支持如下(以下的方法格式都可以自定义): 将java.util.Date类型格式化成字符串显示; 将java.sql.Date类型格式化成字符串显示; 将Timestamp类型格式化成字符串显示 将字符串转换成java.util.Date类型 将字符串转换成java.sql.Date类型 将字符串转换成Timestamp类型 比较两个时间的时间差,返回格式为x天x时x分x秒
java时间处理
tearhero的专栏
11-26 719
 Date类学习总结　1.计算某一月份的最大天数Calendar time=Calendar.getInstance();time.clear();time.set(Calendar.YEAR,year); //year 为 int time.set(Calendar.MONTH,i-1);//注意,Calendar对象默认一月为0           int day=time.g
Date 数据类型格式化定义
zhouzhiwengang的专栏
08-13 2141
第一种：Mybatis 查询结果集映射为实体对象，如果其中包含java.util.Date 日期类型属性，如何输出指定的日期格式(yyyy-MM-dd) 解决思路是：在实体对象***Object.class 属性中，添加@JsonFormat(pattern ="yyyy-MM-dd") 注解标签： 注意:@JsonFormat 标签来源于SpringMVC 依赖的jackson.fasterxml类包之中。 实现流程是:MyBatis 查询结果集封住成对应的实体对象，实体对象通过SpringM.
Java Web程序中利用Spring框架返回JSON格式的日期
10-22
本篇文章将介绍如何在Spring框架中配置JSON日期格式化，以便在Web服务响应中以自定义的日期格式返回日期。 首先，我们需要解决Spring MVC中日期转换为JSON时默认显示为时间戳的问题。这可以通过创建一个自定义的`...
解决SpringMVC 返回Java8 时间JSON数据的格式化问题处理
10-20
本文将详细介绍两种解决Spring MVC返回Java 8日期时间JSON数据格式化问题的方法。 **解决方法一：使用Jackson-datatype-jsr310库** 首先，我们需要引入`jackson-datatype-jsr310`这个依赖库。在Maven项目的`pom....
Java中日期格式化与显示的多种方法
从最初的`java.util.Date`和`java.util.Calendar`类，到后来引入的`java.text.SimpleDateFormat`用于格式化输出，再到Java 8中推出的全新的日期时间API（`java.time`包），Java为开发者提供了越来越强大、灵活且线程...
java常用工具类 Date日期、Mail邮件工具类
08-25
* WEB 应用程序中，Date 日期工具类可以用于日期和时间的操作和格式化，Mail 邮件工具类可以用于邮件的发送和接收操作。 Date 日期和 Mail 邮件工具类是 Java 开发中两个非常重要的工具类，广泛应用于各种应用程序...
datetime类型用date格式化问题
12-23
解决datetime类型用date格式化问题
Date格式化
玩转Java
09-02 6794
Date格式化： Date date = new Date(); System.out.println(date); /*注意，dd需要小写，另外，需要注意的是，匹配符字母不能随意写*/ /*获取date*/ SimpleDateFormat sdf1 = new SimpleDateFormat("YYYY年MM月dd日 "); /*获取time*/ SimpleDateFormat sdf2 = ne
Date日期进行格式化和文本解析
热门推荐
IT小白的博客
08-22 1万+
日期进行格式化： DateFormat是一个抽象类继承了Format类 对日期/时间进行格式化 格式化(也就是日期–>文本）、解析 （文本 -->日期) 成员方法： String format(Date date) 按照指定的模式，把Date日期，格式化符合模式的字符串 Date parse(String source) 把符合模式的字符串，解析为Date日期 DateFormat类...
Date 格式化
橙子
03-23 2248
Date date = new Date(); String strDateFormat = "yyyy-MM-dd"; SimpleDateFormat sdf = new SimpleDateFormat(strDateFormat); String str = sdf.format(date); ParsePosition pos = new ParsePosition(8); Date createTime = sdf.parse(str, pos);
格式化Date
lena blog
03-24 637
yyyy-MM-dd得到：年-月-日 yyyy-MM-dd HH:mm:ss得到：年-月-日 时:分:秒 SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd"); String date=sdf.format(new Date());//格式化日期 sdf.parse(date)；//将字符串格式的日期转换成Date类型 ...
日期类及格式化类
m0_72167535的博客
11-12 335
Calendar是用来承载字符串转化成日期对象的容器，calendar对象有个clear后set值的过程，高并发下，set值的过程，会出现把上次set值给覆盖的情况。上述示例中，是在多线程执行的任务中存在日期的格式化处理，打印出来的结果有三种，有可能就是给每个线程任务传入的日期，有可能是其他线程传入的日期，有可能会报错。ThreadLocal是空间换时间的做法，是为每个线程创建一个副本，每个线程访问自己线程的副本，各个线程之间互相不会干扰，隔离了各个线程之间的数据共享。
3种 Springboot 全局时间格式化方式，别再写重复代码了
架构师小秘圈
09-08 1342
时间格式化在项目中使用频率是非常高的，当我们的 API 接口返回结果，需要对其中某一个 date 字段属性进行特殊的格式化处理，通常会用到 SimpleDateFormat 工具处理。S...
Date的使用与格式化
weixin_44342481的博客
02-01 1151
Date的使用创建对象获取从1970-01-01 00:00:00到date的秒数设置在Date经过了多少秒与new Date(1000l)相似将字符串转换成Date将Date格式化输出 时间字段 字母 日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 Month July; Jul; 07 w 年中的周数 Number 27 W 月份中的周数 Number 2 D 年中的天数 Number 189
2017.12.11 Date格式化
SzeLH的博客
12-12 847
1.BeanUtils.copyProperties(in,put)当有Date类型且为null时报错。 解决方法：将put中的改为String类型，将in中的Date格式化为String类型。String formatDate(Date date){ if(date == null){ return ""; } SimpleDateFormat sdf = new SimpleDateF
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ohmygodvv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值