The following is a JSP code to display date range fields using jQuery.
pageEncoding="ISO-8859-1"%>
<html>
<head>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.6.1.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jquery/jquery-ui-1.8.15.custom.min.js'/>"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Date Picker Example</title>
<script type="text/javascript">
$(function() {
var dates = $( "#fromDate, #toDate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/M/yy" />",
changeYear: true,
gotoCurrent:true,
yearRange: '-50',
minDate: "-50Y",
maxDate: "0D",
showOn: "button",
buttonImage: "<c:url value='/images/calendar.gif'/>", // optional , provide custom image here
buttonImageOnly: true,
buttonText: 'Select Date',
onSelect: function( selectedDate ) {
var option = this.id == "fromDate" ? "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 );
}
});
});
</script>
</head>
<body>
<label for="fromDate"> Date From </label>
<input id="fromDate" name="fromDate" readOnly="true" type="text" value="" />
<label for="toDate"> Date To </label>
<input id="toDate" name="toDate" readOnly="true" type="text" value="" />
</body>
</html>