layui laydate实现日期选择并禁用指定的时间

最终实现禁用2023-9-26这天的效果

官网地址 日期和时间组件文档 - layui.laydate

下面是实现的代码

javascript 复制代码
<!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>
相关推荐
Hilaku6 分钟前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding15 分钟前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!21 分钟前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp
程序员老赵23 分钟前
Docker 部署 Filestash:轻松搭建浏览器文件管理平台
前端·docker·开源
夏天要喝冰可乐25 分钟前
给 23 万字修仙小说造个阅读站:浏览器内打包 EPUB 分页阅读 + 三主题实战
前端·产品·全栈
茶底世界之下30 分钟前
林间步道要不要加暗角?用 Awaking 把强度收在20%
前端·ios·图片资源
执子念的飞鱼30 分钟前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
行者全栈架构师41 分钟前
【鸿蒙心迹】互动卡片全链路——把核心功能放到桌面(FormKit 实战)(HarmonyOS 7.x)
前端·算法·架构
java1234_小锋43 分钟前
【技术专题】HTML5 网页技术 - HTML5 表单基础以及增强
前端·html·html5
燕落南枝1 小时前
HTML 学习:辅助标签 label 与字符实体
前端·学习·html