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');
}
})
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>
如果觉得有用,帮忙采纳一下哦。谢谢
写这个文章的原因是只要创建日期控件一次之后,即使remove日期选择器,input的聚焦(focus)事件会重新将其创建出来。百度了许久,又不会改底层laydate。困扰了许久,各种去掉focus事件不起作用。