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() + 1
     let 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

相关阅读:
线性回归算法之鸢尾花特征分类【机器学习】
leetcode 刷题 log day 49
Ansible系列 | Ansible多种变量类型详解
Redis(五)
【老生谈算法】matlab实现Retinex理论的图像去雾算法源码——图像去雾算法
【NGINX--1】基础知识
Mybatis-Plus如何自定义SQL注入器？
基于ssm技术的校自助阅览室的设计与实现毕业设计源码242326
【OpenCV4】高斯滤波 cv::GaussianBlur() 用法详解和代码示例（c++）
派大星的小站

原文地址：https://blog.csdn.net/Jet_Lover/article/details/133681947