最近因为客户的需求,又小小的研究了下layui的laydate,不得不说这个时间控件不错,UI也好看,但是该控件现在还没有类似的方法,限定某天不可选,恰巧客户就要求这个~你说气不气~上网各种找方法最终终于解决了~
思路是这样的,laydate渲染完成后实际上是一个table,table的类名也是有的,可以循环这个table的td,最后在符合你的条件的td上加上一个laydate-disabled类名就好了~接下来上代码
由于客户要的是每周一不要选,所以我们这么写:
<script type="text/javascript">
$(function(){
var now = new Date();
//执行一个laydate实例
laydate.render({
elem: '#haha', //指定元素
value:now,
min: 0,
max: 7, //以上是渲染过程,网上教程都有讲就不说了,主要看ready函数
ready: function(){
var elem = $(".layui-laydate-content");//获取table对象
layui.each(elem.find('tr'), function (trIndex, trElem) {//遍历tr
layui.each($(trElem).find('td'), function (tdIndex, tdElem) {
//遍历td
var tdTemp = $(tdElem);
if (tdTemp.hasClass('laydate-day-next') || tdTemp.hasClass('laydate-day-prev')) {
return;
}
if (tdIndex == 1) {
//此处判断,是1的加上laydate-disabled,0代表星期日
tdTemp.addClass('laydate-disabled');
}
});
});
},
done: function(value, date){
alert("我成功了哈哈!");
}
});
});
<script>
效果实现~