laydate 根据选择渲染日期控件及"日期格式不合法"
0、参考
laydate报“日期格式不合法”和Cannot read property appendChild of undefined错误
layDay日期格式不合法报错解决
1、前言
在页面使用laydate，渲染控件后点击赋值，提示日期格式不合法
点击控件时，提示日期非法，在laydate.js找到 "t.elem.appendChild(n)," 将其注释掉
2、代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<title>laydate根据选择渲染日期控件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="0"/>
<link th:href="@{/css/laydate.css}" rel="stylesheet"/>
</head>
<body>
<div>
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>查询条件：</label>
<select id="dateType" style="width: 60px;" onchange="changeTimeType()">
<option value="1">分秒</option>
<option value="2">小时</option>
<option value="3">日</option>
<option value="4">月</option>
<option value="5">年</option>
</select>
</li>
<li class="select-time">
<label>时间：</label>
<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"/>
<span>-</span>
<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
</li>
</ul>
</div>
</form>
</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/ajax/libs/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/ajax/libs/layui/lay/modules/laydate.js}"></script>
<script type="text/javascript">
//点击控件时，提示日期非法，在laydate.js找到 "t.elem.appendChild(n)," 将其注释掉
let laydate;
let debugLog = true;
$(function () {
initLayDate();
});
function changeTimeType() {
let dateType = $("#dateType option:selected").text();
if (debugLog) {
console.log("changeTimeType dateType=" + dateType);
}
if (dateType == "日") {
renderDate("startTime", "date");
renderDate("endTime", "date");
} else if (dateType == "月") {
renderDate("startTime", "month");
renderDate("endTime", "month");
} else if (dateType == "年") {
renderDate("startTime", "year");
renderDate("endTime", "year");
} else {
renderDate("startTime", "datetime");
renderDate("endTime", "datetime");
}
}
function renderDate(id, dateType) {
let param = {
elem: '#' + id,
type: dateType,
trigger: 'click',
}
// 如果元素已经绑定了事件，就不会重新绑定事件，不会刷新元素的option，
// 所以每次重新绑定前将元素的eventHandler = false，就可以重新渲染了
$('#' + id)[0].eventHandler = false
laydate.render(param);
}
function initLayDate() {
layui.use('laydate', function () {
laydate = layui.laydate;
let dateType = $("#dateType option:selected").text();
let type = "datetime";
if (dateType == "日") {
type = "date"
} else if (dateType == "月") {
type = "month"
} else if (dateType == "年") {
type = "year"
}
if (debugLog) {
console.log("initLayDate dateType=" + type);
}
//常规用法
let start = laydate.render({
elem: '#startTime',
type: type,
trigger: 'click',
done: function (value, date) {
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}
}
});
let end = laydate.render({
elem: '#endTime',
type: type,
trigger: 'click',
done: function (value, date) {
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}
}
});
})
}
</script>
</html>
