首先说一下 控制点击 指定 日期的方法,代码如下:
$('#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 这个时间范围内的日期。
}
})