laydate 根據選擇渲染日期控制元件
阿新 • • 發佈:2022-05-24
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>