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


Posted in Javascript onMay 10, 2020

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

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

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

样例

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

当替换了大批字段之后 运行之后 发现踩了一个大坑 那就是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表格列内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 #Javascript
JavaScript 装逼指南(js另类写法)
May 10 #Javascript
js中!和!!的区别与用法
May 09 #Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 #Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 #Javascript
js根据后缀判断文件文件类型的代码
May 09 #Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
python与php实现分割文件代码
2017/03/06 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Django中的AutoField字段使用
2020/05/18 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
Linux文件系统类型
2012/02/15 面试题
工作自我评价分享
2013/12/01 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
离职感谢信
2015/01/21 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android