首先js代码和java一样,其中一部分出错,整个程序就会崩溃.所以js中只要有一个控件渲染失败,其他控是不会渲染.假设你导入了10个控件,前9个都正常,第10个出错,那么前9个是不会渲染的.
所以一旦控件渲染失败,检查控制台,看一看是哪一个控件出问题了,进行修改即可,你不用纠结第一个控件为什么没有渲染成功.
目前layui的官方文档中时间控件的渲染方法,是完全正确的,不用怀疑是不是缺少什么属性,或者没有加那个方法,至于有些文章中提到的lay-key的问题,完全不用担心,官方早已经优化了.只需要找到其他控件的错误进行修改即可
<input type="text" class="layui-input"
id="xxxx"
placeholder=" - ">
layui.use(function(){
var laydate = layui.laydate;
laydate.render({
elem: "#xxxx"
)}
这样就完成了日期控件的渲染了
最终效果是
我个人的教训
表格控件和时间控件一起使用,表格控件的cols值的格式出问题
官方文档: cols:[[
↑↑↑↑↑ {
field: 'empId',
title: '员工ID',
width: 80,
sort: true
},
]]
//-----------------------------------------------------------------------
// 实际使用中两个中括号[[]]之间要换行,否则框架回会识别出错 ,
// 我是配合thymeleaf框架一起使用,出现了识别不清的问题.
//-----------------------------------------------------------------------
cols: [
↑↑↑↑↑ [
↑↑↑↑↑ {
field: 'empId',
title: '员工ID',
width: 80,
sort: true
},
{
field: 'name',
title: '员工姓名',
width: 80,
sort: true
},
{
field: 'sex',
title: '性别 ',
width: 100,
sort: true
},
{
field: 'sal',
title: '员工工资',
width: 100,
sort: true
},
{
field: 'birthday',
title: '生日',
width: 80,
sort: true
},
{
field: 'address',
width: 100,
title: '积分',
sort: true
},
{
field: 'deptId',
title: '打卡',
width: 100,
sort: true
},
{
title: '操作',
width: 120,
fixed: 'right'
}
]
]
表格控件渲染失败,导致时间控件渲染失败.
若果对你有帮助,给个赞,鼓励一下