layui日周月年的日历切换，当选择周时设置每周一可选，其余日期置灰不可选

最新推荐文章于 2023-10-08 14:59:49 发布

原创

最新推荐文章于 2023-10-08 14:59:49 发布 · 4.5k 阅读

本文展示了如何在layui日历组件中实现日周月切换，当选择周时，仅设置每周一为可选，其余日期显示为灰色并不可选。实现方法是在日期td元素上添加laydate-disabled类，并在laydate的ready和change事件中调整设置。参考了一篇大神的文章，该文章通过修改laydate.js源码，满足了一些特定需求，如限制到小时、分钟选择，以及只选择每周一等。

效果图：

gif

代码：

日期都是放在一个table里面的，每个日期都是一个td，要想设置周一不可选，只需要给其余td都加上class="laydate-disabled"，在ready和change的时候都要进行设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .hide {
            display: none;
        }
        .layui-laydate-header {
            background-color: #009688;
        }
        .laydate-set-ym span,
        .laydate-set-ym span:hover {
            color: #fff;
        }

        .layui-laydate-header i.laydate-prev-y,
        .layui-laydate-header i.laydate-next-y,
        .layui-laydate-header i.laydate-prev-m,
        .layui-laydate-header i.laydate-next-m {
            color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <label>
            日：<input typ