Easyui Datebox设置可选时间范围

来源：互联网发布：mac双系统卸载win7 编辑：程序博客网时间：2024/04/30 02:30

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，超出范围的日期为灰色，点击后无事件

0 0