datebox没有日期范围限制的功能,需要修改easyUI源码
1、修改jquery.datebox.js
找到createCalendar方法,加上一个参数opts.
if (!state.calendar){
createCalendar(opts);
}
修改createCalendar方法
function createCalendar(opts){
......
state.calendar.calendar({
fit:true,
border:false,
startDate:opts.startDate,
endDate:opts.endDate
});
......
}
opts.startDate和opts.endDate,是创建calendar时,需要加入的参数2、修改jquery.calendar.js
找到show(target)方法,在循环生成每个日期的方法内找到
$('<td class="calendar-day calendar-other-month"></td>').attr('abbr',day[0]+','+day[1]+','+day[2]).html(day[2]).appendTo(tr);
去掉这句话,重写后面的内容
var tdHtml = $("<td class=\"calendar-day calendar-other-month\"></td>");
if(opts.startDate){
var sTmp = opts.startDate.split('-');
var disTd= $("<td class=\"calendar-day calendar-limitingDate calendar-other-month\"></td>");
if(day[0] < parseInt(sTmp[0])){
tdHtml = disTd;
}else if(day[0] == parseInt(sTmp[0]) && day[1]<parseInt(sTmp[1])){
tdHtml = disTd;
}else if(day[0]==parseInt(sTmp[0])&&day[1]==parseInt(sTmp[1])&&day[2]<parseInt(sTmp[2])){
tdHtml = disTd;
}
}
if(opts.endDate){
var eTmp = opts.endDate.split('-');
var disTd= $("<td class=\"calendar-day calendar-limitingDate calendar-other-month\"></td>");
if(day[0] > parseInt(eTmp[0])){
tdHtml = disTd;
}else if(day[0] == parseInt(eTmp[0]) && day[1]>parseInt(eTmp[1])){
tdHtml = disTd;
}else if(day[0]==parseInt(eTmp[0])&&day[1]==parseInt(eTmp[1])&&day[2]>parseInt(eTmp[2])){
tdHtml = disTd;
}
}
tdHtml.attr("abbr",day[0]+","+day[1]+","+day[2]).html(day[2]).appendTo(tr);
循环写入每一个日期数字时,与传入的startDate和endDate判断是否属于可操作的日期
代码找到每个日期的click的function
if($(this).hasClass('calendar-limitingDate')){
return
}
也可以引申更多的操作,alert('当前日期不可选');3、CSS代码实现
.calendar-limitingDate{
border: 0 none;
color: #e2e2e2;
cursor: default;
}
4、实际调用
<input class="easyui-datebox" data-options="startDate:'2015-08-10',endDate:'2015-08-20'"></input>
页面效果显示如下
日期限制为8-10到8-20,超出范围的日期为灰色,点击后无事件