Layui的laydate日期组件限制只能选择休息日

Layui的laydate日期组件限制只能选择休息日。
layui只给我们提供了日期组件的min/max配置。我想将上班日期设置禁用addClass('laydate-disabled')
给定的数据是上班日期,格式是字符串类型数组。日期没有规律,不能根据星期几进行判断。
所以需要遍历日期,判断该日期是否上班,上班则设置禁用。
问怎么获取layui日期组件的遍历的日期?



var laydate = layui.laydate;
   laydate.render({
    elem: '#datedate',
    theme: "#2D51E3",
    format: 'yyyy-MM-dd',
    min: date,
    max: end_date,
    trigger: 'click',
    ready: function(){
    //   ins22.hint('日期可选值设定在 <br> '+date+' 到 2200-10-14');
        formaDates()
    },
    change: function (value, date, endDate) {
        formaDates()
    }

  });

  function formaDates(){
      console.log("上班日期禁用方法")
    //获取table对象
    var trElems = $(".layui-laydate-content").find('tr');
    trElems.each(function () {//遍历tr
        $(this).find('td').each(function (tdIndex, tdElem) {
            // lay-ymd="2023-5-1"
            debugger
            // tdElem.innerText
          
        });
    });
}

参考此文章

times为yyyy-MM-dd格式的字符串数组

 $('.layui-laydate-content').find("td").each(function (i, e) {
            if (times.indexOf($(e).attr('lay-ymd')) >= 0) {
                  $(e).addClass('laydate-disabled');
            } 

        })

  1. 此问题的根本原因是laydate在渲染日历时,默认是将所有日期都可选的。我们需要在渲染前遍历日期,将不可选日期设置为禁用状态。
  2. 解决方法是:
    (1) 在laydate.render()前获取日历中每个日期单元格元素。可以通过如下代码获取:
js
var trEles = $('#laydate_table').children('tr');

(2) 遍历日期,判断该日期是否为允许选择的日期,如果不是,为其添加类名laydate-disabled使其禁用。

js
for(var i=0; i<trEles.length; i++){
  var tdEles = $(trEles[i]).children('td');
  for(var j=0; j<tdEles.length; j++){
    var d = new Date(tdEles[j].innerHTML);
    // 判断日期是否为允许选择日期,如果不是添加禁用类名
    if(day1.indexOf(d.getDay())==-1 && day2.indexOf(d.getDay())==-1){  
      $(tdEles[j]).addClass('laydate-disabled');
    }
  }
}

(3) 渲染laydate组件。这样在日历显示时,不可选日期就已经被设置为禁用状态,无法选择。
3. 完整代码如下:

html
<input class="layui-input" id="test1" placeholder="YYYY-MM-DD">
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var day1 = [1, 3, 5, 7];
  var day2 = [2, 4, 6];
  
  var trEles = $('#laydate_table').children('tr');
  for(var i=0; i<trEles.length; i++){
    var tdEles = $(trEles[i]).children('td');
    for(var j=0; j<tdEles.length; j++){
      var d = new Date(tdEles[j].innerHTML);
      if(day1.indexOf(d.getDay())==-1 && day2.indexOf(d.getDay())==-1){  
        $(tdEles[j]).addClass('laydate-disabled');
      }
    }
  }
  
  laydate.render({
    elem: '#test1'
  });
});  
</script>

如果觉得有用,帮忙采纳一下哦。谢谢

  • 这篇文章讲的很详细,请看:layui 结束日期不能小于开始日期的设置
  • 除此之外, 这篇博客: layui中日期控件的添加小图标控制日期选择器中的 遇到的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 写这个文章的原因是只要创建日期控件一次之后,即使remove日期选择器,input的聚焦(focus)事件会重新将其创建出来。百度了许久,又不会改底层laydate。困扰了许久,各种去掉focus事件不起作用。