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>

posted @ 2022-05-24 09:44 一只桔子2233 阅读(1492) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript div滚动添加行

· layer 弹窗使用说明

· LayDate（好像过时了）

· layui 日期控件问题

· html套用layui选择日期

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

历史上的今天：
2020-05-24 【Layui__疑难杂症】layui使用问题的收集整理

公告

昵称：一只桔子2233
园龄： 8年3个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

laydate 根据选择渲染日期控件及"日期格式不合法"

0、参考

1、前言

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>