Easyui Datebox设置可选时间范围

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值