页面效果展示:
js:
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript">
$(function () {
var $day = $("#day"),
$month = $("#month"),
$year = $("#year");
<!--出始化年-->
var dDate = new Date(),
dCurYear = dDate.getFullYear(),
str = "";
for (var i = dCurYear - 100; i < dCurYear + 1; i++) {
if(i==dCurYear){
str = "<option value=" + i + " selected=true>" + i + "</option>";
}
else{
str = "<option value=" + i + ">" + i + "</option>";
}
$year.append(str);
}
<!--出始化月-->
for (var i = 1; i <= 12; i++) {
if (i == (dDate.getMonth() + 1)) {
str = "<option value=" + i + " selected=true>" + i + "</option>";
} else {
str = "<option value=" + i + ">" + i + "</option>";
}
$month.append(str);
}
<!--调用函数出始化日-->
TUpdateCal($year.val(), $month.val());
$("#year,#month").bind("change", function(){
TUpdateCal($year.val(),$month.val());
});
});
<!--根据年月获取当月最大天数-->
function TGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function TUpdateCal(iYear, iMonth) {
var dDate = new Date(),
daysInMonth = TGetDaysInMonth(iMonth, iYear),
str = "";
$("#day").empty();
for (var d = 1; d <= parseInt(daysInMonth); d++) {
if (d == dDate.getDate()) {
str = "<option value=" + d + " selected=true>" + d + "</option>";
} else {
str = "<option value=" + d + ">" + d + "</option>";
}
$("#day").append(str);
}
}
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
jsp:
This is my JSP page. <br><br><br>
easyui自带的日历功能:<br>
<form action="user!loginValidate" method="get">
从<input id="startTime" class="easyui-datetimebox" name="birth1" data-options="required:true,showSeconds:false" value="" style="width:150px">
到 <input id="endTime" class="easyui-datetimebox" name="birth2" data-options="required:true,showSeconds:false" value="" style="width:150px">
<br/>
<br/>
<br/>
生日年月日的三级联动<br>
<select id="year" name="year">
<option >${year}</option>
</select>年
<select id="month" name="month">
</select>月
<select id="day" name="day"></select>日
<input type="submit" name="sub" value="提交">
</form>
项目中路径问题:<br>
ServletPath:<%=request.getServletPath() %><br/>
获取项目的根路径contextPath:<%=request.getContextPath() %><br>
<hr/>
<a href="${contextPath }">项目的根路径path: ---${contextPath }---</a>
<br/>
<a href="${pageContext.request.contextPath }">项目的根路径path: --- ${pageContext.request.contextPath }---</a>