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

文章讲述了如何通过JavaScript和CSS类来修改Layui的laydate日期组件,使其仅允许用户选择工作日(周一至周五),并处理了‘现在’按钮选择禁用日期的bug,该问题已在Layui的新版本中得到修复。
摘要由CSDN通过智能技术生成

如题,在使用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了,建议去除掉这个按钮或者尝试重写下选择的方法,判断一下元素是否被禁用。

2023-05-23 更新
针对上面说的现在按钮依然可以选择禁用日期的bug,我去Gitee提了Issues,目前官方已经修复啦~,只需将layui升级到对应版本即可,具体参考:

https://gitee.com/layui/layui/issues/I6N9LC

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值