Layui日期插件如何实现只显示工作日（排除周六日）的选择-Layui教程-PHP中文网

Layui datepicker需通过disabledDate函数禁用周六日，返回true禁用（周日0、周六6），并配合change事件校验手动输入；CSS可设.laydate-day-weekend{pointer-events:none;opacity:.4}优化交互，但无法彻底隐藏周末格子。

layui datepicker 怎么禁用周六日

layui 原生 laydate 不支持直接配置「仅启用工作日」，必须通过 ready 和 change 钩子 + 自定义 disableddate 逻辑实现。核心是拦截日期渲染和点击行为，把周末日期置为不可选状态。

用 disabledDate 函数过滤非工作日

disabledDate 是 laydate 实例的配置项，接收一个函数，返回 true 表示该日期禁用。注意：它只控制「是否可选」，不隐藏日期格子，但能阻止点击和回车确认。

关键点：

disabledDate 的参数是 date（原生 Date 对象），不是字符串或时间戳
周日是 0，周六是 6，别写反成 1 和 7
该函数在每次面板打开、切换月份、输入日期时都会执行，性能无压力

laydate.render({
  elem: '#test1',
  disabledDate: function(date) {
    var week = date.getDay(); // 获取星期几（0=周日，1=周一...6=周六）
    return week === 0 || week === 6; // 禁用周日和周六
  }
});

为什么只靠 disabledDate 还不够

单纯用 disabledDate 会出现两个实际问题：

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

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

下载

用户手动输入类似 2024-05-26（周日）仍可能被接受，除非额外监听 change 事件校验
面板里周末日期仍显示为灰色可点击态（视觉上未完全“隐藏”），易引发误操作质疑
如果业务还需排除法定节假日，disabledDate 就得叠加数组查找，注意别用 includes 在 IE 中报错

补救建议：

laydate.render({
  elem: '#test1',
  change: function(value, date, endDate) {
    if (date && (date.getDay() === 0 || date.getDay() === 6)) {
      layer.msg('请选择工作日', {icon: 0});
      this.setValue(''); // 清空非法输入
    }
  },
  disabledDate: function(date) {
    return date.getDay() === 0 || date.getDay() === 6;
  }
});