实现功能: 日期文本可输入 ,可选择 起始日期不能大于 截止日期
jsp: js在下面有链接 可以下载。
<td width="20%" align="center">
<input type="text" id="startTime" onblur="jugue(this)"
name="startTime" size="7" value="${startTime}" class="topInput" />
-
<input type="text" id="endTime" onblur="jugue(this)" size="8"
name="endTime" value="${endTime}" class="topInput" />
</td>
<link type="text/css" href="<%=basePath%>css/date/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript"src="<%=basePath%>js/date/jquery-1.5.1.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.6.min.js"></script>
<script type="text/javascript"src="<%=basePath%>js/date/ui/jquery.ui.core.js"></script>
<script type="text/javascript"src="<%=basePath%>js/date/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="<%=basePath%>js/date/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript"src="<%=basePath%>js/date/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/date/ui/date.js"></script>
<script type="text/javascript">
$(function() {
var dates = $("#startTime,#endTime")
.datepicker(
{
changeYear : true,
changeMonth : true,
numberOfMonths : 1,
onSelect : function(selectedDate) {
var option = this.id == "startTime" ? "minDate": "maxDate", instance = $(this).data(
"datepicker"), date = $.datepicker.parseDate(
instance.settings.dateFormat|| $.datepicker._defaults.dateFormat,selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
}
function isDate(str) {
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if (r == null)
return false;
var d = new Date(r[1], r[3] - 1, r[4]);
return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d
.getDate() == r[4]);
}
function jugue(Element) {
if (Element.value != "") {
if (!isDate(Element.value)) {
alert("日期格式错误,请按照“2002-01-01”重新输入!");
Element.value = "";
Element.focus();
//return false;
}
}
}
</script>