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

您所在的位置:网站首页 iqoo9pro发布时间 Layui的laydate日期组件限制只能选择工作日

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

#Layui的laydate日期组件限制只能选择工作日| 来源: 网络整理| 查看: 265

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

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

日 一 二 三 四 五 六

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

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() } }); })

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3