EasyUI日历控制可选日期，控制只能选择周几，或者只能选择一时间范围内的日期

本文链接：https://blog.youkuaiyun.com/zhang_cl_cn/article/details/96490237

本文介绍如何通过EasyUI的日期选择器实现日期选择限制，包括仅允许选择周一及指定日期范围的功能。提供了具体实现代码及说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说一下控制点击指定日期的方法，代码如下：

$('#dateboxID').datebox().datebox('calendar').calendar({  // dateboxID这个就是easyui日历的在html中的id
	validator:function(date){
		return boolean;    //这行代码主要做的工作就是进行与 easyui的日历中的日期进行比对，返回boolean类型。当date进行比较返回true的时候在日历界面就可以点击选择这个日期。
	}
})

主要的实现原理就是在validator方法中，日历界面有多少个日期它就会循环使用validator并将界面的日期作为参数date传过来，这个date参数是Date类型，注意这里是一个循环，它的参数是界面的每一个日期。可以对date进行业务比较，当返回true的时候，表示传过来相对应的日期是可以选中的，false则表示不可选中点击。
下面简单说两个示例：

1.只能选中周一的例子，html的代码就不贴了，毕竟要做这个业务说明基本显示已经没有问题了。

$('#dateboxID').datebox().datebox('calendar').calendar({  // dateboxID这个就是easyui日历的在html中的id
	validator:function(date){
		return date.getDay() == 1;    //参数date是Date类型的，当date.getDay()==1  返回true的时候在日历界面就可以点击选择这个日期。
	}
})

EasyUI 对应的星期一~星期五列表对应的是

['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

所以当选择周一的时候对应的索引就是 1

2.指定显示时间范围

$('#dateboxID').datebox().datebox('calendar').calendar({  // dateboxID这个就是easyui日历的在html中的id
	validator:function(date){
		return new Date('2016-06-06') <= date  &&  date <= new Date('2016-06-16');    //参数date是Date类型的，表示界面可以点击选择 2016-06-06 ~ 2016-06-16 这个时间范围内的日期。
	}
})