如题,在使用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