thymelef中的dates格式化数据

最新推荐文章于 2022-10-15 12:40:18 发布
最新推荐文章于 2022-10-15 12:40:18 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： thymelef
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014774648/article/details/112180887
版权

格式如下：

        <div class="form-group">
            <label class="col-sm-3 control-label">时段：</label>
            <div class="col-sm-6">
                <div class="input-group date">
                    <input name="startTime" th:value="${#dates.format(certificate.startTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="startTime" placeholder="开始时间" autocomplete="off"/>
                    <span class="input-group-addon">至</span>
                    <input name="endTime" th:value="${#dates.format(certificate.endTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="endTime" placeholder="结束时间" autocomplete="off"/>
                </div>
            </div>
        </div>

 全页内容如下：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('测试')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-material-edit" th:object="${certificate}">
        <input type="hidden" name="id" th:field="*{id}">

        <div class="form-group">
            <label class="col-sm-3 control-label">时段：</label>
            <div class="col-sm-6">
                <div class="input-group date">
                    <input name="startTime" th:value="${#dates.format(certificate.startTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="startTime" placeholder="开始时间" autocomplete="off"/>
                    <span class="input-group-addon">至</span>
                    <input name="endTime" th:value="${#dates.format(certificate.endTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="endTime" placeholder="结束时间" autocomplete="off"/>
                </div>
            </div>
        </div>

        <div class="form-group" style="margin-top:30px;">
            <label class="col-sm-3 control-label">名称：</label>
            <div class="col-sm-6">
                <input name="certificateName" id="materialName1" class="form-control" th:field="*{certificateName}" type="text" required
                       style="width:calc(100% - 100px);float: left; margin-right: 3px;">
                <button id="uploadBtn" type="button" class="btn btn-sm btn-primary"
                        style="display: inline-block; width: 95px;position: relative;float: left;height: 33px;"><i
                        class="fa fa-check"></i>上 传
                </button>&nbsp;
            </div>
        </div>

        <input type="hidden" name="savePath" th:field="*{savePath}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">预览图片：</label>
            <div class="col-sm-6">
                <a class=""><img class="img img-xs" th:src="*{savePath}"></a>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">获得者：</label>
            <div class="col-sm-6">
                <div class="input-group">
                    <input name="userIds" id="userIds" th:field="*{userIds}" type="hidden">
                    <input class="form-control userIds" th:field="*{userNames}" type="text" disabled="">
                    <a class="input-group-addon" onclick="selectUsers()"><i class="fa fa-search"></i></a>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-6">
                <textarea name="remark" th:field="*{remark}" class="form-control"></textarea>
            </div>
        </div>

    </form>
</div>

<th:block th:include="include :: footer" />
<script th:src="@{/ajax/libs/plupload/plupload.full.min.js}"></script>

<script type="text/javascript">
    var prefix = ctx + "personal/book";

    var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
        runtimes: 'html5,silverlight,html4,flash',
        browse_button: 'uploadBtn',
        url: ctx + "cms/uploadMaterial",
        flash_swf_url: "/ajax/libs/plupload/Moxie.swf",
        silverlight_xap_url: "/ajax/libs/plupload/Moxie.xap",
        filters: {
            max_file_size: '200mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [{title: "图片文件", extensions: "jpg,jpeg,gif,png,bmp"},
                {title: "压缩文件", extensions: "zip,rar,gz"}
            ]
        }//只允许上传图片文件
    });
    //绑定文件添加进队列事件
    uploader.bind('FilesAdded', function (uploader, files) {
        uploader.start(); //开始上传
    });
    uploader.bind('Error', function (up, err) {
        alert(err.message);//上传出错的时候触发
    });
    uploader.bind("FileUploaded", function (up, file, res) {

        var json = res.response;
        json = JSON.parse(json);

        if (json.code != 0 && json.code != '0') {
            $.modal.alertError(json.msg);
        }
        uploadCallback(json.data);

    })
    window.onload = function () {
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#startTime',
                type: 'datetime',
                /*theme: 'molv',*/
                trigger: 'click',
                done: function(value, date) {
                    // 开始时间大于等于今天
                    if (value !== '') {
                        if (value > $('#endTime').val()) {
                            $('#endTime').val("");
                        }
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                        endDate.config.min.hours = date.hours;
                        endDate.config.min.minutes = date.minutes;
                        endDate.config.min.seconds = date.seconds;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                        endDate.config.min.hours = '';
                        endDate.config.min.minutes = '';
                        endDate.config.min.seconds = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#endTime',
                min: $('#startTime').val(),
                type: 'datetime',
                /*theme: 'molv',*/
                trigger: 'click',
            });
        });
        uploader.init(); //初始化
    };

    function uploadCallback(json) {
        $("#materialName1").val(json.name.split('.')[0]);
        $("#savePath").val(json.path);
        $(".img").attr("src", json.path);
    }

    function selectUsers() {
        $.modal.open("选择证书获得者（可多选）", prefix + "/user/" + ($("#userIds").val() != "" ? $("#userIds").val() + ",": "-1,"));
    }

    function userResults(re) {
        $("#userIds").val(re.ids);
        $(".userIds").val(re.names);
    }

    function submitHandler() {
        if (verifyInput()) {
            $.operate.save(prefix + '/edit', $('#form-material-edit').serialize());
        }
    }

    function verifyInput() {
        var flag = true;
        var materialName1 = $("#materialName1").val();
        if(!materialName1 || materialName1 === ""){
            $.modal.alertError("请选择证书!");
            flag = false;
        }
        var startTime = $("#startTime").val();
        if(!startTime || startTime === ""){
            $.modal.alertError("请选择开始有效时间!");
            flag = false;
        }
        var endTime = $("#endTime").val();
        if(!endTime || endTime === ""){
            $.modal.alertError("请选择结束有效时间!");
            flag = false;
        }
        return flag;
    }

    // 预览图片
    $("#form-material-edit").off("click").on("click", '.img', function() {
        var html="<div id='outerdiv' style='position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; height: 100%; display: none;'>\n" +
            "    <div id='innerdiv' style='position: absolute; top: 80.8px; left: 446.079px;'>\n" +
            "        <img id='bigimg' style='border: 5px solid rgb(255, 255, 255); width: 969.842px;' src=''>\n" +
            "    </div>\n" +
            "</div>";

        $("body").append(html);

        var outerdiv="#outerdiv";
        var innerdiv="#innerdiv";
        var bigimg="#bigimg";
        var url = $(this).attr('src');
        $(bigimg).attr("src", url);

        $("<img/>").attr("src", url).load(function(){
            var windowW = $(window).width();
            var windowH = $(window).height();
            var realWidth = this.width;
            var realHeight = this.height;
            var imgWidth, imgHeight;
            var scale = 0.8;

            if(realHeight>windowH*scale) {
                imgHeight = windowH*scale;
                imgWidth = imgHeight/realHeight*realWidth;
                if(imgWidth>windowW*scale) {
                    imgWidth = windowW*scale;
                }
            } else if(realWidth>windowW*scale) {
                imgWidth = windowW*scale;
                imgHeight = imgWidth/realWidth*realHeight;
            } else {
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);

            var w = (windowW-imgWidth)/2;
            var h = (windowH-imgHeight)/2;
            $(innerdiv).css({"top":h, "left":w});
            $(outerdiv).fadeIn("fast");
        });

        $(outerdiv).click(function(){
            $(this).fadeOut("fast");
        });
    });
</script>
</body>
</html>

 

少弋弋
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Thymeleaf时间的格式化。
weixin_44546465的博客
05-24 332
Thymeleaf时间的格式化。 <td>批复时间:</td> <td><input type="text" style="width: 240px;" th:name="cname" readonly th:value="${#dates.format(project.pfsj, 'yyyy-MM-dd')}"> </td> 项目使用了Thymeleaf模板，所有取值使用了th: 。正常html页面
Thymeleaf 表达式工具类（#strings #dates #numbers #bools）
白洞，白色的明天在等着我们
08-24 1738
Thymeleaf 提供了丰富的表达式工具类，例如#strings、#dates、#numbers、#bools，感兴趣就点进来学习下吧(*^▽^*)~
Thymeleaf 格式化时间
GinChou的萌新博客
08-23 283
th:value="${#dates.format(date,'YYYY-MM-dd')} date是你传递的时间；
thymeleaf date format
red
03-02 1274
thymeleaf date format thymeleaf日期格式化 对后台传过来的日期格式化处理显示在前台页面 <input type="text" class="input-text" placeholder="" id="attendEvening" name="attendEvening" th:value="${#dates.f...
dates.format_在SQL中使用DATES及其不同的内置函数NOW（），FORMAT（）
cumtb2002的博客
06-24 593
dates.formatBasically, when we are working with dates, we need to be sure that the format of the date, we are trying to insert in the database is in format, and matches the format of the date column i...
详解Java关于时间格式化的方法
09-07
在Java编程中，时间格式化是一个常见的需求，特别是在处理与日期和时间相关的数据时，如从数据库中获取信息或向API接口返回数据。本文将详细讲解Java中如何进行时间格式化，以及在SpringBoot框架中如何高效地实现这...
浅谈如何实现easyui的datebox格式化
09-02
本文将深入探讨如何实现 EasyUI 的 DateBox 格式化，以便满足不同的日期显示需求。 首先，DateBox 默认的日期格式是 "dd/mm/yyyy"，但往往我们需要根据项目需求自定义日期格式。例如，我们可能希望日期以 "yyyy++mm...
springboot2.0 配置时间格式化不生效问题的解决
09-07
在Spring Boot 2.0中，时间格式化的配置通常是为了使JSON序列化和反序列化过程中日期的展示更加友好。然而，有时候按照官方文档或常见教程配置后，却发现时间格式化并没有生效，这可能是由于一些特定原因导致的。...
Discount Rate Changes: Historical Dates-数据集
03-11
1975年之前的“生效日期”数据代表纽约联储贴现率变化的日期，1975年之后的数据代表美联储首个贴现率变化的日期。资料来源：理事会：银行和货币统计，1914-1941年和1941-1970年；1970-1979年年度统计摘要；以及1978...
SpringBoot2.0整合jackson配置日期格式化和反序列化的实现
08-26
这些配置将使jackson库将日期类型的数据格式化为yyyy-MM-dd HH:mm:ss的字符串格式，并且在反序列化时将字符串类型的数据转换为日期类型的数据。 最后，我们可以在Java Beans中使用jackson的注解来实现日期格式化和...
在 Thymeleaf 中使用日期的方法
hunterzhang86的博客
10-15 2730
1。介绍 Thymeleaf 是一个 Java 模板引擎，能够直接与 Spring 一起工作。有关 Thymeleaf 和 Spring 的介绍，请查看 this write-up。 除了这些基本功能之外，Thymeleaf 还为我们提供了一组实用程序对象，它们将帮助我们在应用程序中执行常见任务。 在本教程中，我们将讨论新旧 Java Date 类的处理和格式化以及 Thymeleaf 3.0 的一些特性。 2。 Maven 依赖项 首先，让我们创建配置以将 Thymeleaf 与 Spring 集成到我们
Thymeleaf表达式语法以及日期格式化
流连是谁的博客
09-22 2万+
简单表达式 （simple expressions）${...} 变量表达式*{...} 选择变量表达式#{...} 消息表达式@{...} 链接url表达式 字面量Text literals: 'one text' , 'Another one!' ,…文本Number literals: 0 , 34 , 3.0 , 12.3 ,…数字Boolean literals: true , f
th:object、th:field、th:value 和 #dates.format 的冲突问题处理
weixin_34390105的博客
12-12 7731
若直接使用th:object 分解对象后,在搭配th:field="${#dates"使用#dates.format会抛出下面的异常: ------------------------------------------------------- 若搭配th:field="*{#dates"使用#dates.format会抛出下面的异常: 最后只能够这样,...
thymeleaf处理日期
FurtherSkyQ的博客
06-10 850
本篇介绍些thymeleaf中的日期格式化的方法： 1.用#dates.format来解决： <span th:text="${#dates.format(user.date, 'yyyy-MM-dd')}">4564546</span> 或者 <span th:text="${#dates.format(billingForm.startTime,'yyyy-MM-ddHH:mm:ss')}">4564546</span> ...
Thymeleaf 日期格式化处理
cheng_cuo_tuo的博客
04-18 1497
${#dates.format(key)} ${#dates.format(key, 'yyyy-MM-dd HH:mm:ss')} 格式化传递过来的 Date 对象，如果没有指定时间格式，将使用浏览器当前使用的时间格式 ${#dates.year(key)} ${#dates.month(key)} ${#dates.day(key)} ${#dates.hour(key)} ${#dates...
Java学习笔记（28）-Date和DateFormat
Jak的博客
05-23 5906
Date类java中用于描述日期的类。Date内部维护着一个long值，这个值表示的是1970-01-01 00：00：00到Date所表示的日期之间的毫秒值。Calendar类日历类Calendar不存在千年虫问题。并且可以非常方便的计算日期。SimpleDateFormat类该类的作用是可以很方便的在字符串和日期类之间相相互转换。我们可以将一个描述日期的字符串：2012-01-01转换为一个D...
详解Java中格式化日期的DateFormat与SimpleDateFormat类
weixin_33877092的博客
05-17 1632
DateFormat其本身是一个抽象类,SimpleDateFormat 类是DateFormat类的子类,一般情况下来讲DateFormat类很少会直接使用,而都使用SimpleDateFormat类完成,下面我们具体来看一下两个类的用法: DateFormat1. DateFormat 介绍DateFormat 的作用是 格式化并解析“日期/时间”。实际上，它是Date的格式化工具，它能帮助...
java 中Date类型的时间显示格式
热门推荐
人可的专栏
08-23 15万+
<br /><br />本文转至http://www.blogjava.net/sharky/articles/13057.html<br />创建一个日期对象<br /><br />使用系统的当前日期和时间创建一个日期对象并返回一个长整数的简单例子。 这个时间通常被称为Java 虚拟机(JVM)主机环境的系统时间。import java.util.Date; public class DateExample1 <br />{ <br />   public static void main(String[
thymeleaf list 时间格式化
最新发布
03-02
Thymeleaf是一种用于构建Java服务器端渲染的模板引擎，它提供了丰富的功能来处理数据和展示。在Thymeleaf中，可以使用内置的日期格式化功能来格式化时间。 要在Thymeleaf中格式化时间，可以使用th:each指令来遍历列表，并使用th:text指令来显示格式化后的时间。以下是一个示例： ```html <table> <tr th:each="item : ${list}"> <td th:text="${#dates.format(item.date, 'yyyy-MM-dd HH:mm:ss')}"></td> </tr> </table> ``` 在上面的示例中，`${list}`是一个包含日期对象的列表。使用`th:each`指令遍历列表中的每个元素，并使用`th:text`指令将格式化后的时间显示在表格中。 `#dates.format()`是Thymeleaf提供的日期格式化函数，第一个参数是要格式化的日期对象，第二个参数是日期的格式。在上面的示例中，日期格式为`yyyy-MM-dd HH:mm:ss`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值