jsp时间选择器,可以自主的锁定日期区间,将未来多个时间区间设置为不可选
新人小白一个,不知道发什么,就将自己之前做项目时候,费了老大力气才做出来的功能发布一下。
在做类似于酒店网站的时候,入住日期肯定无法避免,同一个房间,被预定之后其他用户肯定无法再次预定,可预订的日期肯定是要在时间选择器(也就是日期插件)上表示出来的。
简而言之,就是从后台读取订单,获取订单预约的时间,然后将已经预约的时间区间在时间选择器之中锁定,不能选择。
使用的是一个my97的时间插件!
下载路径:http://www.my97.net/demo/index.htm
】
一,jsp页面获取时间字符串
<c:forEach items="${Claim}" var="Claim">
<span class="timeA" >${Claim.begintime},${Claim.endtime}</span><br/>
</c:forEach>
后台controller,将读取到的数据放入model里面,然后jsp页面获取,并显示出来。
在这里,begintime是一个时间区间的开始时间。
endtime 同一个时间区间的结束时间。
**重点,两者之间有一个逗号!!!!!
二,时间控件
<input id="d411" class="Wdate" type="text" autocomplete="off" onblur="cbegintime()" onclick="WdatePicker({skin:'whyGreen',minDate:'%y-%M-{%d+1}',disabledDates:['#F{mydate()[0]}','#F{mydate()[1]}','#F{mydate()[2]}','#F{mydate()[3]}','#F{mydate()[4]}','#F{mydate()[5]}']})"/>
这是一个插件,使用的是my97,里面的属性在官网上都能看到,就不在这里罗嗦了!
三,写jquery代码!
<script type="text/javascript" src="mydate/WdatePicker.js"></script>
<script>
function mydate() {
var st= new Array();
for(var ss = 0 ;ss < $(".timeA").length ; ss++) {
var datearr = new Array()
var str = $(".timeA").eq(ss).text();
datearr = str.split(',');
var beginYear = datearr[0].substring(0, 4);
var endYear = datearr[1].substring(0, 4);
var yearA = endYear - beginYear;
var beginMonth = datearr[0].substring(5, 7);
var endMonth = datearr[1].substring(5, 7);
var MonthA = endMonth - beginMonth;
var beginDate = datearr[0].substring(8, 9);
var endDate = datearr[1].substring(8, 9);
var DateA = endDate - beginDate;
var beginTime = datearr[0].substring(9, 10);
var endTime = datearr[1].substring(9, 10);
var start = 0;
var end = 9;
if (yearA == 0) {
if (MonthA == 0) {
if (DateA == 0) {
st.push(beginYear + "-" + beginMonth + "-" + beginDate + "[" + beginTime + "-" + endTime + "]");
} else if (DateA == 1) {
st.push(beginYear + "-" + beginMonth + "-" + beginDate + "[" + beginTime + "-" + 9 + "]");
var beginDateA = ++beginDate;
st.push(beginYear + "-" + beginMonth + "-" + beginDateA + "[" + 0 + "-" + endTime + "]");
}
else if (DateA > 1) {
st.push(beginYear + "-" + beginMonth + "-" + beginDate + "[" + beginTime + "-" + 9 + "]");
var beginDateA = beginDate;
for (var aa = 0; aa < DateA; aa++) {
beginDateA = ++beginDateA;
if ((beginDateA - beginDate) == DateA) {
break;
}
st.push(beginYear + "-" + beginMonth + "-" + beginDateA + "[" + 0 + "-" + 9 + "]");
}
st.push(beginYear + "-" + beginMonth + "-" + beginDateA + "[" + 0 + "-" + endTime + "]");
}
} else if (MonthA == 1) {
var monthA = "135781012";
var monthB = "46911";
if (beginMonth == 2) {
if ((beginYear % 4) != 0) {
var b = beginDate;
if (b == 0 || b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 8 + "]");
b++;
}
for (b; b < 3; b++) {
if (b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 8 + "]");
}
}
} else {
var b = beginDate;
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
for (b; b < 3; b++) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthA.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 1 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthB.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
}
}
}
var a = 0;
for (a; a < endDate; a++) {
st.push(beginYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + 9 + "]");
}
st.push(beginYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + endTime + "]");
}
else if (MonthA > 1) {
var monthA = "135781012";
var monthB = "46911";
if (beginMonth == 2) {
if ((beginYear % 4) != 0) {
var b = beginDate;
if (b == 0 || b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 8 + "]");
b++;
}
for (b; b < 3; b++) {
if (b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 8 + "]");
}
}
} else {
var b = beginDate;
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
for (b; b < 3; b++) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthA.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 1 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 1 + "]");
}
}
} else if (monthB.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
}
}
}
beginMonth++;
var beginMonthA = beginMonth;
for (beginMonth; beginMonth < 13; beginMonth++) {
if (beginMonthA < 10) {
beginMonthA = "0" + beginMonth;
}
if (beginMonthA == endMonth) {
var a = 0;
for (a; a < endDate; a++) {
st.push(beginYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + 9 + "]");
}
st.push(beginYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + endTime + "]");
break;
} else {
st.push(beginYear + "-" + beginMonthA);
}
}
}
} else if (yearA == 1) {
var monthA = "135781012";
var monthB = "46911";
if (beginMonth == 2) {
if ((beginYear % 4) != 0) {
var b = beginDate;
if (b == 0 || b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 8 + "]");
b++;
}
for (b; b < 3; b++) {
if (b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 8 + "]");
}
}
} else {
var b = beginDate;
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
for (b; b < 3; b++) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthA.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 1 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthB.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
}
}
}
beginMonth++;
for (beginMonth; beginMonth < 13; beginMonth++) {
st.push(beginYear + "-" + beginMonth);
}
beginYear++;
for (var c = 0; c < 13; c++) {
if (c < 10) {
var b = "0" + c;
}
if (b == endMonth) {
var a = 0;
for (a; a < endDate; a++) {
st.push(endYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + 9 + "]");
}
st.push(endYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + endTime + "]");
break;
} else {
st.push(beginYear + "-" + b);
}
}
}
else if (yearA > 1) {
var monthA = "135781012";
var monthB = "46911";
if (beginMonth == 2) {
if ((beginYear % 4) != 0) {
var b = beginDate;
if (b == 0 || b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 8 + "]");
b++;
}
for (b; b < 3; b++) {
if (b == 1) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 8 + "]");
}
}
} else {
var b = beginDate;
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
for (b; b < 3; b++) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthA.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 1 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
}
}
} else if (monthB.indexOf(beginMonth) != -1) {
var b = beginDate;
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + beginTime + "-" + 9 + "]");
b++;
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
b++;
}
for (b; b < 4; b++) {
if (b == 0 || b == 1 || b == 2) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "-" + 9 + "]");
} else if (b == 3) {
st.push(beginYear + "-" + beginMonth + "-" + b + "[" + 0 + "]");
}
}
}
beginMonth++;
for (beginMonth; beginMonth < 13; beginMonth++) {
st.push(beginYear + "-" + beginMonth);
}
beginYear++;
var beginYearA = beginYear;
for (beginYear; beginYear < endYear; beginYear++) {
st.push(beginYear);
}
for (var c = 0; c < 13; c++) {
if (c < 10) {
var b = "0" + c;
}
if (b == endMonth) {
var a = 0;
for (a; a < endDate; a++) {
st.push(endYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + 9 + "]");
}
st.push(endYear + "-" + endMonth + "-" + a + "[" + 0 + "-" + endTime + "]");
break;
} else {
st.push(endYear + "-" + b);
}
}
}
}
return st;
}
function mydatea(){
var a = mydate();
alert($(".timeA").eq(0).text());
}
</script>
这个代码就不多解释了,想要了解过程的可以加我的联系方式
(QQ:3156131273)
最后总结一下,这串代码怎么使用!
- 你从后台将数据查询出来,一个开始日期,一个结束日期。
- 然后前台jsp页面获取,循环遍历,放入一个标签里面,标签的clss是不能改变的,不能改变的,不能改变的!!!
- jsp页面引入日期插件。
- 将script复制到jsp页面即可。
- 最后最重要的一点,如果你要锁定的日期区间住够多,就好好去看看我写的日期控件!!!
辛苦手打,如果由什么错误,欢迎指出来!
欢迎大佬,萌新一起探讨代码;
联系方式(QQ:3156131273)
联系方式(QQ:3156131273)
联系方式(QQ:3156131273)