Layer UI表格列日期格式化及取消自动填充日期的实现方法

Layer UI表格列日期格式化方法较为强大 也比较简单

针对需要格式化的表格列 添加以下代码即可

,templet : "
<div>
{
{
layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd')
}
}
</div>"

样例

当替换了大批字段之后 运行之后 发现踩了一个大坑 那就是Layer ui框架会自动填充日期

若当前字段返回值为NULL 他会自动填充日期为当前时间

查了不少方法后找到了比较有效的方法

如下

利用格式化日期 重现判断当前值

, { field: 'NOTICE_DATE', width: 155, title: '报关单放行日期', align: 'center' ,
templet : "#NOTICE_DATE_TIME" }

@*NOTICE_DATE_TIME*@
<script type="text/html" id="NOTICE_DATE_TIME">
 {{# if(d.NOTICE_DATE !=null){ }}
 <div>{{layui.util.toDateString(d.NOTICE_DATE, 'yyyy/MM/dd')}}</div>
 {{# } else {}}
 <div>{{}}</div>
 {{# } }}
</script>

只有不为空得情况下使用格式化 否则不适用

日期格式化也可以更换日期格式如：

,templet : "<div>
{
{
layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd')
}
}
</div>"
 ,templet : "<div>
{
{
layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd HH:mm:ss' )
}
}
</div>"

总结

到此这篇关于Layer UI表格列日期格式化及取消自动填充日期的实现方法的文章就介绍到这了,更多相关Layer UI表格列内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • layUI使用layer.open,在content打开数据表格,获取值并返回的方法

    在layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个新窗口,新窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行后一步的操作. 如简单的选中之后显示选中数据的id. 首先在当前原始页面上,定义一个工具条 <button class="layui-btn" data-type="simulatePack">模拟</button> 在实现这个工具条的点击操作-

  • 使用layer弹窗和layui表单实现新增功能

    使用layer弹窗和layui表单实现新增功能

    1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面) 2.实现 a* 页面效果图 b*页面代码 --构建from表单 <div id="add-main" style="display: none;"> <form class="layui-form" id="add-form" action=""> <div class="layu

  • 使用layui的layer组件做弹出层的例子

    官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <link

  • layui中layer前端组件实现图片显示功能的方法分析

    本文实例讲述了layer前端组件实现图片显示功能的方法.分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 官网下载地址:http://layer.layui.com/ 或者点击此处本站下载. 里面有具体的使用方法 这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件 <script

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

  • Layer UI表格列日期格式化及取消自动填充日期的实现方法

    Layer UI表格列日期格式化方法较为强大 也比较简单 针对需要格式化的表格列 添加以下代码即可 ,templet : " <div> { { layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd') } } </div>" 样例 当替换了大批字段之后 运行之后 发现踩了一个大坑 那就是Layer ui框架会自动填充日期 若当前字段返回值为NULL 他会自动填充日期为当前时间

  • Mybatis-Plus使用@TableField实现自动填充日期的代码示例

    Mybatis-Plus使用@TableField实现自动填充日期的代码示例

    目录 一.前言 二.导入maven依赖 三.创建实体类 四.自定义实现类 MyMetaObjectHandler 五.Controller测试 六.测试添加 七.测试更新 八.总结 一.前言 我们在日常开发中经常使用ORM框架,比如Mybatis.tk.Mybatis.Mybatis-Plus.不过最广泛的还是Mybatis-Plus,我们的一些表,都会有创建时间.更新时间.创建人.更新人.这些我们每次都要自己手动set吃力不讨好,所以Mybatis-Plus带来了自动填充,今天小编带大家一起学

  • SpringBoot基于HttpMessageConverter实现全局日期格式化

    SpringBoot基于HttpMessageConverter实现全局日期格式化

    还在为日期格式化的问题头痛?赶紧阅览文章寻找答案吧! 学习目标 快速学会使用Jackson消息转换器并实现日期的全局格式化. 快速查阅 源码下载:SpringBoot-Date-Format 开始教程 一.全局日期格式化(基于自动配置) 关于日期格式化,很多人会想到使用Jackson的自动配置: spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.timeZone: GMT+8 这种全局日期格式化固然方便,但在消息传递时只能

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

  • jQuery表格列宽可拖拽改变且兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  • layui按条件隐藏表格列的实例

    我就废话不多说了,直接上关键代码吧!给大家做个参考 layui.use(['table','form','laypage'], function() { var table = layui.table ,form = layui.form ,laypage = layui.laypage; layer.load(0); setTimeout(function() { table.render({ id:"item",//用作于隐藏列名为item的列 elem: '#QD', url:p

  • Golang中使用Date进行日期格式化（沿用Java风格）

    本文介绍了Golang中使用Date进行日期格式化,分享给大家,具体如下: Github https://github.com/noogo/date Date Date是一个基于time包装的一个日期包,通过此包可以快速创建日期.获取时间戳.毫秒数及最重要的日期格式化,另外你还可以继续使用time包下的所有函数(除time.Foramt(string)外)你可以通过以下方法快速创建一个Date对象: Now() WithTime(t time.Time) WithTimestamp(timest

  • vue自定义表格列的实现过程记录

    vue自定义表格列的实现过程记录

    目录 前言 效果图 setTable组件 使用 结束语 前言 在我们开发PC端的项目使用表单时,尤其是crm系统,应该经常会遇到这样的需求, 用户需要根据设置来自定义显示列. 查了element的官方文档, 并没有此类组件, 所以手动封装了一个简单的组件, 希望能在大家开发此类需求时能够有所帮助. 效果图 具体效果图如下: 自定义显示列  (可实现拖拽进行排序,点击选中,再次点击取消选中) 按照用户已设置好的字段排序/显示/隐藏每一列 setTable组件 首先实现拖拽排序的话我们需要借助一个插

  • Vue实现动态控制表格列的显示和隐藏

    Vue实现动态控制表格列的显示和隐藏

    本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码,供大家参考,具体内容如下 效果如图: 表头标题是重复的.为了能看到滚动效果 v-if=“lists[0].ispass” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示.取消勾选隐藏.默认勾选 <el-dropdown :hide-on-click="false">             <i class="iconfont icon-shaixuan" ></i

随机推荐