LayUI 日期格式显示

我不是女神ヾ 2023-10-10 13:36 48阅读 0赞

日期字段未进行格式化在LayUI 前端展示效果截图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][]

解决思路:通过LayUI 字段field的模板属性templet，将data类型转换为String.

功能代码：

![c458d34e3bf745218ba8ef1439bcec52.png][]

LayUI完整代码：

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
        <link th:href="@{/layui/css/view.css}" rel="stylesheet" />
        <script th:src="@{/layui/layui.all.js}"></script>
        <script th:src="@{/jquery/jquery-2.1.4.min.js}"></script>
        <script th:src="@{/layui/js/view.js}"></script>
        <title></title>
    </head>
    <body class="layui-view-body">
    	<div class="layui-content">
    	    <div class="layui-row">
    			<div class="layui-card">
                    <div class="layui-card-header">
                    	<i class="layui-icon mr5"></i>用户管理
                    	<button class="layui-btn layui-btn-xs layui-btn-normal pull-right mt10" data-type="add"><i class="layui-icon mr5"></i>新增</button>	
                    </div>
                    <div class="layui-card-body">
                    	<div class="searchTable">
    						 员工ID：
    						 <div class="layui-inline mr5">
    						 	<input class="layui-input" name="id" autocomplete="off">
    						 </div>
    						 员工名称：
    						 <div class="layui-inline mr5">
    						 	<input class="layui-input" name="name" autocomplete="off">
    						 </div>
    						 员工编码：
    						 <div class="layui-inline mr10">
    						 	<input class="layui-input" name="code" autocomplete="off">
    						 </div>
    						 <button class="layui-btn" data-type="reload">查询</button>
    						 <button class="layui-btn layui-btn-primary" data-type="reset">重置</button>
    					</div>
                    	<table class="layui-hide" id="userDataTable" lay-filter="config"></table>
    					<script type="text/html" id="operation">
    						<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    					</script>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
    var table = layui.table;
    var layer = layui.layer;
    table.render({
    	id: 'userTable'
    	,elem: '#userDataTable'
        ,url: '[[@{/}]]employee/page'
       	,page: true
    	,request: {
         pageName: 'pageNo', // page
         limitName: 'pageSize' // limit
     	}
        ,cols: [
        	[
    	      {field:'id', width: 50, title: 'ID'}
    	      ,{field:'name', title: '员工名称', align: 'center'}
    	      ,{field:'code', title: '员工编码', align: 'center'}
    	      ,{field:'sex', title: '性别', align: 'center',  templet: function(d){if(d.sex == 1){return '男'}else{return '女'}}}
    	      ,{field:'birthday', title: '员工生日', align: 'center', templet:"<div>{
       {layui.util.toDateString(d.birthday)}}</div>"}
    	      ,{field:'telephone', title: '电话号码', align: 'center'}
    	      ,{field:'workYear', title: '工作年限', align: 'center'}
    	      ,{title:'操作', align: 'center', toolbar: '#operation', width:150}
        	]
       	]
        ,response: {
            statusCode: 200
        }
        ,parseData: function(res){
        	return {
        		"code": '200'
                ,"msg": '请求成功'
                ,"count": res.total
                ,"data": res.records
        	};
        }
    });
    
    active = {
    	add: function() {
    		layer.open({
        		type: 2,
        		maxmin: true,
        		area: ['80%', '80%'],
        		title: '新增',
        		content: '[[@{/}]]employee/add'
        	});
    	},
    	reload: function() {
    		table.reload('userTable', {where: {
    				id : $("input[name='id']").val()
    				,name : $("input[name='name']").val()
    				,code : $("input[name='code']").val()
    			}
    		}, 'data');
    	},
    	reset: function() {
    		$(".searchTable .layui-input").val("");
    	}
    };
    
    // 按钮事件
    $('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    
    //监听行工具事件
    table.on('tool(config)', function(obj){
    	var row = obj.data;
    	if(obj.event === 'del') {
    		layer.confirm("确认删除吗？", {icon: 3, title:'提示'}, function(index) {
    			layer.close(index);
    			$.ajax({
    		        url : "[[@{/}]]user/delete",
    		        data : {'id': row.id},
    		        type : "post",
    		        dataType : "json",
    		        error : function(data) {
    		        	errorHandle(data);
    		        },
    		        success : function(data) {
    		        	$(".searchTable .layui-btn").eq(0).click();
    		        }
    		    });
    		});
        } else if (obj.event === 'edit') {
        	layer.open({
        		type: 2,
        		maxmin: true,
        		area: ['80%', '80%'],
        		title: '修改',
        		content: '[[@{/}]]user/edit?id=' + row.id
        	});
        }
    });
    </script>
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/662b34c08a08450b874a15caceebbc90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT,size_20,color_FFFFFF,t_70,g_se,x_16
[c458d34e3bf745218ba8ef1439bcec52.png]: https://img-blog.csdnimg.cn/c458d34e3bf745218ba8ef1439bcec52.png