Layui的laydate日期组件限制只能选择工作日

2023-05-16

如题,在使用Layui的laydate日期组件时,layui只给我们提供了日期组件的min/max配置,分别对应最小可选时间和最大可选时间,但是如果我们需求是只能选择工作日(周一至周五),很明显这个时候layui提供的min/max配置并不能支持我们的需求,所以就需要我们手动的去使用js进行一些处理。

通过使用浏览器的F12功能,可以查看到layui的日期组件主要内容实际上就是一个table
在这里插入图片描述
thead对应的就是周日~周一的标题

<thead>
	<tr>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
</thead>

tbody对应的就是每个具体的日期
在这里插入图片描述
 知道了对应的HTML元素以后就好办了,简单说下思路:
我们可以通过js获取到对应的html元素,然后进行遍历,获取元素的下标值,因为格式是周日到周六这样排序的,所以获取日期的下标值对应的0=周日,6=周六,代码如下:

<script>
function formaDates(){
	//获取table对象
    var trElems = $(".layui-laydate-content").find('tr');
    trElems.each(function () {//遍历tr
        $(this).find('td').each(function (tdIndex, tdElem) {
            //遍历td,index===0表示周日,index===6表示周六
            if (tdIndex === 0 || tdIndex === 6) {
            	// laydate-disabled是layui的样式类,添加后会禁用元素不可选择
                $(this).addClass('laydate-disabled');
            }
        });
    });
}
$(function(){
//执行一个laydate实例
    layui.laydate.render({
        elem: '#yysj', //指定元素
        // value: now,
        min: 0,
        btns: ['clear', 'confirm'],
        // 重点!在laydate日期组件打开,准备完后就要执行格式化操作,把非工作日禁用掉
        ready: function () {
            formaDates()
        },
        // 重点!在laydate日期组件,进行翻页等切换操作的时候,要重新执行格式化操作,把非工作日禁用掉
        change: function (value, date, endDate) {
            formaDates()
        }
    });
})
</script>

编写以上代码后,再次测试:
在这里插入图片描述
切换日期后再次测试:
在这里插入图片描述
至此laydate日期组件限制选择工作日就已经完成了,美中不足的是如果没用去除“现在”按钮,点击“现在”按钮还是可以选择被禁用的元素,这应该算是个bug了,建议去除掉这个按钮或者尝试重写下选择的方法,判断一下元素是否被禁用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Layui的laydate日期组件限制只能选择工作日 的相关文章

  • Hadoop中VIntWritable编码方式解析

    最近因为实验室的云计算项目 xff0c 开始学习Hadoop xff0c 有时间就记录一下自己在学习过程中的一些小收获吧 Hadoop权威指南 在序列化这一节有个例子程序 xff0c 叫做TextPair xff0c 代码略长 xff0c

随机推荐

  • MapReduce中的二次排序

    在MapReduce操作时 xff0c 我们知道传递的 lt key value gt 会按照key的大小进行排序 xff0c 最后输出的结果是按照key排过序的 有的时候我们在key排序的基础上 xff0c 对value也进行排序 这种需
  • 基于哈夫曼编码的文件压缩解压

    这个程序是研一上学期的课程大作业 当时 xff0c 跨专业的我只有一点 C 语言和数据结构基础 xff0c 为此 xff0c 我查阅了不少资料 xff0c 再加上自己的思考和分析 xff0c 实现后不断调试 测试和完善 xff0c 耗时一周
  • 2020-12-29 Matlab自动化控制-Adrc自抗扰控制参数调节

    Matlab自动化控制 Adrc自抗扰控制参数调节 上篇参看 xff1a https blog csdn net qingfengxd1 article details 111830762 以最简单的线性组合方法 xff08 1 xff09
  • 单级倒立摆的神经网络控制

    倒立摆系统是一种典型的多变量 非线性 强耦合模型 xff0c 它作为一种被控对象 xff0c 用来检验控制理论的可行性和控制的稳定性 人工神经网络由于具有信息的分布存储 并行处理以及自学习能力等优点 xff0c 在信息处理 模式识别 智能控
  • 基于串级 PID 控制算法的四旋翼无人机控制系统设计与实现

    1 内容简介 略 489 可以交流 咨询 答疑 2 内容说明 无人机 xff0c 英文名称UAV C Unmanned Aerial Vehicle xff0c 是一种特殊的飞行器 xff0c 可以按照预先设定的轨迹进行各种运动 xff0c
  • matlab simulink四旋翼无人机模糊PID控制姿态

    1 内容简介 略 532 可以交流 咨询 答疑 2 内容说明 四旋翼无人机控制灵活 安全性能较高 xff0c 能够实现空中悬停 翻滚 任意角度横 向飞行 xff0c 常常替代人们从事高空危险作业 xff0c 给我们的生活与工作带来了很多便利
  • 深度学习基础

    深度学习介绍 深度学习与机器学习的区别 xff1a 机器学习的特征工程步骤是要靠手动完成的 xff0c 而且需要大量的领域专业知识 深度学习不需要更多的特征处理 只需要进行图片的输入 xff0c 进入神经网络后 xff0c 输出结果 深度学
  • Ubuntu18.04安装ROS Melodic

    1 设置安装源 为了安装ROS Melodic xff0c 首先需要在Ubuntu 18 04 LTS上添加安装源到source list xff0c 方法如下 strong sudo sh c 39 echo 34 deb http pa
  • 嵌入式软件开发笔试面试(五)

    uboot启动流程 uboot是一种启动系统 xff0c 但不属于操作系统 xff0c 内核运行 xff0c uboot结束 启动流程 xff1a 一 汇编阶段 切换到svc模式 为了保证启动稳定 xff0c 关闭看门狗 中断 MMU ca
  • ros(22):catkin_make可以加多线程/多核、catkin_make -j4、catkin_make -j8、catkin_make -j12、catkin_make -j16

    之前以为catkin make 后面不能加多核 多线程 xff0c 现在发现是可以的 xff0c catkin make jn xff08 n为数字 xff09 命令在编译时被拆分为以下两个 xff1a make cmake check b
  • UWB TDOA一维定位解算

    在某些定位场景 xff0c 比如在隧道 走廊等区域 xff0c 需要用到一维解算 xff0c 下面介绍TDOA的长直线解算定位标签位置 xff08 当然也可以用TWR实现一维解算 xff09 定位模型与已知量如下 xff1a 解算不考虑z坐
  • baseflight无头模式原理

    最近探索了baseflight cleanflight源码相关 xff0c 看了源码想分享一下 xff0c baseflight无头模式的原理 baseflight源码可以在github中搜到 xff0c 网址直达 xff1a https
  • cleanflight修改--固件默认飞行模式

    对于我们飞控开发者来说 xff0c 如果每次下完代码后飞行模式modes都要在上位机重新改一次 xff0c 我们肯定会疯掉的 这时候就需要修改固件中默认的飞行模式了 如何下手呢 xff0c 我先从cleanflight飞控的上位机和下位机通
  • 编译mission planner地面站

    编译mp地面站步骤 xff1a 下载最新mp源码 xff1a https github com ArduPilot MissionPlanner 下载最新地面站msi xff08 编译需要引用 xff09 xff1a http firmwa
  • DJI Lightbridge2接收端数据解析

    因为XXXX xff0c 需要对DJI的指令系统做研究 xff0c 首先解析的是 LB2 xff0c 也拆解了七七八八了 xff0c 现在对LB2天空端DBUS口的数据协议进行解析 xff0c 供电子 嵌入式同学进行学习研究 DBUS采用4
  • 室内定位TDOA-UWB实现无线同步的一种方法

    定位中 xff0c 如采用TDOA方式进行坐标解算 xff0c UWB基站间就需要进行时间同步 xff0c 时间同步可以采用有线同步或无线同步 xff1b 找到一篇论文中 xff0c 对无线同步有着巧妙处理 xff0c 特写博客记录一下 U
  • 安装Visual Assit 可在VS2010/VC6.0中使用

    1 1 vs2010中安装 下载Visual Assist X10 6 1823 0 rar破解版 第一步 xff1a 关闭VS2010 第二步 安装 双击安装包中的VA X Setup1823 vsix xff0c 安装 xff1b 第三
  • C++空指针调用类成员函数

    C 43 43 空指针可以调用类成员函数 xff0c 但是 不能调用 类中的 虚函数 我们知道 xff0c 一个对象的指针可以调用它的成员函数和虚函数 xff0c 那么如果一个指向空nullptr的指针 xff0c 能不能调用它的成员函数和
  • MissionPlanner日志保存方法

    闪存日志 目录 闪存日志 日志类型 闪存 VS 数传日志 设置你想要记录的数据 用Mission Planner下载日志 查看内容 详细信息 针对APM Copter 查看KMZ文件 视频教程 日志类型 闪存 VS 数传日志 有两种方法可以
  • Layui的laydate日期组件限制只能选择工作日

    如题 xff0c 在使用Layui的laydate日期组件时 xff0c layui只给我们提供了日期组件的min max配置 xff0c 分别对应最小可选时间和最大可选时间 xff0c 但是如果我们需求是只能选择工作日 xff08 周一至