EasyUI日历控制可选日期,控制只能选择周几,或者只能选择一时间范围内的日期

首先说一下 控制点击 指定 日期的方法,代码如下:

$('#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 这个时间范围内的日期。
	}
})
之前在网上想找一个简单易用的日历选择插件,发现这种前端日历插件很少,而且很多文章写的的算法都不是统一的,所以自己实现了一个基于jquery的日历插件(还支持跳转到指定年份和哦)。 插件中的算法:每日为起始,第一以每年第一个星期四所在的为第一(网上找的好像这个算法比较正规) 实现的效果是在手机端,也可以在PC端用,毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数:1.日期)(返回类名字符串,多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数:1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和的DOM部分可选择并跳转到指定年份和。 插件提供的方法: //获取第一天方法weekfirstdate(),传入年份和数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几getweeknum(),传入年,月,日(注:这里的月份从0开始) console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定confirmweek(),传入年份和数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值