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日期组件限制只能选择工作日 的相关文章

  • 简单制作后台系统页面(含菜单)

    第一步 制作数据库表 我个人喜欢在PowerDesigner先建好数据库模型 然后导入到mysql里 导入方式 在PowerDesigner导航栏点开Datebase选择Datebase Generation再选择最后的preview 然后
  • Layui之选项卡案例 详细易懂

    本期精彩 利用Layui框架实现动态选项卡 继上一篇已经实现了左边的树形菜单栏 这一关卡我们已通过 接下来就是实现右边的动态选项卡的关卡 上个关卡的效果及链接 链接 http t csdn cn tYccL 目录 本期精彩 利用Layui框
  • 会议OA项目之会议发布(多功能下拉框的详解)

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 主要功能点介绍 二 效果展示 三 前端代码 jsp js 四 后端代码
  • layui表格隐藏列的简单实现方法

    需求 渲染表格的时候 比如id在内的一些列是不需要展示给用户看的 但是在操作表格的时候还需要用得到 这就需要隐藏列 的功能 实现效果 页面上不显示 但是能获取到id的值 实现方法 table render id id 可以在这里设置需要隐藏
  • layui分页遇到的问题及button和input的区别

    参考文献 漂亮分页样式和代码 http layui shagua wiki layuidoc demo laypage html 按钮input和代码 http www shagua wiki project 3 p 84
  • LayUI导入Excel表(Apache POI)

    LayUI导入Excel表 Apache POI 前端框架LayUI 将excel表导入到数据库 并展示在页面 首先要明白 excel表整体构造 一整个 excel表是一个工作簿 workbook 而其中又有很多工作表 sheet 然后一行
  • layui文档,最新文档地址,官网已经下线

    最新文档地址 官网已经下线了 http layui shagua wiki layuidoc doc index html
  • layui折叠面板无效 - 已解决

    出现折叠面板无效 可能因为一下两点造成的 原因一 原因二 具体是为什么 我不清楚 正确的方式
  • xShell操作Linux的常用命令

    我们需要在本地连接Linux服务器 可以用winscp来进行连接 优点是图形化界面 文件的层级关系类似于Windows 更容易操作 也可以使用xShell来进行连接 查看和操作文件就需要使用Linux命令 文件的层级关系没有前者直观 但作为
  • layui 手风琴折叠

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div
  • layui显示表格数据的id的两种形式

    1 获取数据库表字段id field id title 用户ID width 100 fixed left align center templet function d return d id 2 templet属性获得id为 title
  • ssm框架+Layui整合案例

    业余写得整合案例 想学习的可以来参考 初来乍到 准备工作 Layui tomcat mysql 目录 1 实现的效果图 2 实现代码 2 0 前端代码 2 1 登录页面login jsp 2 2 登录后跳转的主页面 main jap web
  • js实现字母序号自动递增

    在实现一个考试管理系统的时候 可能会遇到试题的选项不是固定的情况 需要灵活的增加选项 选项自动递增 A B C D F 通过Unicode编码的方式可以灵活实现 本案例是基于layui表格实现的 如果是其他形式 可以修改部分代码 首先获取到
  • layui弹窗间的传值(layui弹出层传值)(窗口传值)

    layui弹窗间的传值 layui弹出层传值 窗口传值 LayUI父窗口向弹出层传递数据可以解决页面中的编辑数据的操作 点击编辑按钮 父窗口传递当前选中行当数据至弹出层 弹出层获取到父窗口传递的数据 接着在弹出层中展示出来 效果如下 具体步
  • layui时间选择器---去除秒列

    layui时间选择器 去除秒列 前言 layui开发文档中介绍的时间选择器包含了时 分 秒的选择 在实际开发过程中 我们选择时间可能不需要精确到秒 原始结构 1 HTML页面引入layui js文件 2 HTML文件中添加如下代码 3 在j
  • echarts实现一个页面同时显示多个图表

    前言 因工作需要 老大要求给我一个JSON数据 用echarts 写一个option实现多个图表 折线图 饼图 关系图 展示 也就是说只要一个div dom对象 实现多个不同形状的图表展示 ps 前期没弄清老大意思 写了三个div来显示 尴
  • 基于SSM 和 layui 的增删查改

    开发工具 IDEA 2021 WebStorm 2021 Mysql 8 0 开发环境 JDK 8 TomCat 8 5 81 apache maven 3 6 1 技术点 Spring SpringMVC Mybatis Mysql Ht
  • layui与flask模板语言{{}}冲突的最佳方案

    使用 Jinja2的 raw 和 endraw 标签把 JavaScript 模板部分标记出来即可 raw endraw 但这是就需要注意区分项目中的 的值是jinja2还是layui
  • layui会议OA项目数据表格新增改查

    文章目录 前言 一 后台代码编写 1 1 数据表优化 1 2 R工具类 1 3 UserDao新增改查 1 4 Servlet的编写 二 前台页面的编写 2 1 userManege jsp 2 2 userManage js 2 3 新增
  • layui表格table不分页,显示全部数据

    layui表格table不分页 显示全部数据 表格渲染时添加两行代码 page false limit Number MAX VALUE 数据表格默认全部显示 table render elem orderTable id orderTab

随机推荐

  • 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 周一至