讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui laydate如何设置特定日期不可选(禁用日期)

胖强同学_6753

胖强同学_6753

发布时间:2026-08-01 12:09:49

|

398人浏览过

|

来源于php中文网

原创

disabledDate 是 Layui ≥2.9.8 唯一可靠的日期禁用入口,需判空、返回布尔值,仅对 date/datetime 类型生效,推荐用时间戳 Set 提前预置禁用日期并配合 reload 动态更新。

disabledDate 函数是唯一可靠入口

低版本 layui(如 2.8.x 及更早)根本不识别 disableddate,写了也无效。必须确认你用的是 ≥ 2.9.8 的 laydate。别指望靠手动加 laydate-disabled 类来“视觉禁用”——用户仍能点击、回填、绕过校验。

disabledDate 是唯一真正生效的禁用入口,它在每次渲染日历单元格时被调用,传入一个 Date 实例(不是字符串),你只需返回 true 表示禁用当天,false 或 undefined 表示可用。

  • 必须开头判空:if (!date) return false,否则初始化或清空时会报错中断
  • 仅对 type: 'date' 和 type: 'datetime' 生效,time、year、month 类型下完全不触发
  • 函数内避免同步查接口、遍历大数组、频繁 new Date()——它执行极频繁,卡顿直接体现在日历展开延迟上

禁用指定日期(如节假日)怎么写才稳

最稳的方式是提前把不可选日期转成时间戳 Set,避免每次调用都做字符串解析或 new Date():

const forbiddenDates = new Set([
  new Date('2026-04-04').getTime(), // 清明节
  new Date('2026-05-01').getTime(), // 劳动节
  new Date('2026-10-01').getTime(), // 国庆
]);

laydate.render({
  elem: '#date',
  disabledDate: function(date) {
    if (!date) return false;
    return forbiddenDates.has(date.getTime());
  }
});
  • 别用 arr.includes(date.toISOString().split('T')[0]) 这类字符串匹配——时区偏移会导致 toISOString() 生成的日期和用户本地显示不一致
  • 如果日期来自后端 API,务必统一用时间戳或标准 ISO 格式(YYYY-MM-DD)传输,前端再转 getTime()
  • 动态更新禁用列表?改完 forbiddenDates 后,必须调 ins.reload(),否则日历不会重算

禁用周末或某一天(比如周一)的常见坑

用 date.getDay() 判断周几是正解,但容易栽在两个地方:

  • getDay() 返回 0 是周日,6 是周六,1 才是周一——别把 date.getDay() === 1 写成 === 2
  • 千万别在函数里写 new Date().getDay(),那是当前时间的星期,不是待渲染的 date 参数
  • 国际化不影响判断逻辑:即使你设了周起始为周一,getDay() 仍是 JS 原生规则(周日=0),无需额外转换

禁用周一的最小可用写法:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
disabledDate: function(date) {
  if (!date) return false;
  return date.getDay() === 1; // 周一
}

多个禁用条件共存时怎么写才不出错

所有逻辑必须塞进同一个 disabledDate 函数里,顺序要合理:先空值判断,再叠加各种规则,最后一定要有 return false 兜底。漏掉这句,所有没匹配上的日期都会被禁用。

例如同时禁用周末 + 节假日段(2026-04-10 至 2026-04-15):

disabledDate: function(date) {
  if (!date) return false;
  const day = date.getDay();
  const time = date.getTime();
  const holidayStart = new Date('2026-04-10').setHours(0, 0, 0, 0);
  const holidayEnd = new Date('2026-04-15').setHours(23, 59, 59, 999);

  if (day === 0 || day === 6 || (time >= holidayStart && time <= holidayEnd)) {
    return true;
  }
  return false; // 关键:没有匹配任何禁用条件,必须放行
}

复杂点在于禁用逻辑一旦依赖其他表单字段(比如切换城市才禁某天),就得在对应事件里主动调 ins.reload();而最容易被忽略的,就是那个结尾的 return false —— 它不是可选,是必须。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2303

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4963

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6050

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5558

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

783

2024.05.22

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

100

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

80

2026.09.30

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

60

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn