本文主要是介绍layui laydate实现日期选择并禁用指定的时间，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最终实现禁用2023-9-26这天的效果
官网地址 日期和时间组件文档 - layui.laydate
下面是实现的代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --><input type="text" class="layui-input" id="test1">
</div><script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){var laydate = layui.laydate;function getEndDate() {let date = new Date()let year = date.getFullYear()let month = date.getMonth() + 1let day = date.getDate()if (month < 10) {month = "0" + month}if (day < 10) {day = "0" + day}return endYear = year + '-' + month + '-' + day}getEndDate()//执行一个laydate实例laydate.render({elem: '#test1', //指定元素min: -7 //7天前,max: endYear, //最大时间ready: function (date) {disableDate()},change: function (date) {disableDate()},});const disableDate = () => {const tdElements = document.querySelectorAll('.layui-laydate-content td');tdElements.forEach(td => {let targetDate = td.getAttribute('lay-ymd');if (targetDate == '2023-9-26') { //这里循环禁用需要禁用的日期td.classList.add('laydate-disabled');}});}
});
</script>
</body>
</html>
这篇关于layui laydate实现日期选择并禁用指定的时间的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
