Easyui Datebox设置可选时间范围

最新推荐文章于 2024-01-17 13:52:36 发布

原创最新推荐文章于 2024-01-17 13:52:36 发布 · 1.1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#datebox #插件 #扩展 #easyui

Web前端同时被 2 个专栏收录

16 篇文章

订阅专栏

EasyUI

3 篇文章

订阅专栏

本文介绍了如何通过修改Easyui的datebox和calendar.js源码，为Datebox插件添加日期范围限制功能。详细步骤包括：1.在createCalendar方法中添加参数；2.在show(target)方法内调整日期点击事件；3.使用CSS实现超出范围日期的样式；4.实际应用中设置日期范围为8月10日至20日，超出日期将呈现灰色且不可选。

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