Using Spring (JAVA):
Add css and js in header:
<link href=”<%= request.getContextPath()%>/decorators/css/jquery.datepick.css” rel=”stylesheet” type=”text/css” />
<script src=”<%= request.getContextPath()%>/decorators/javascripts/jquery-1.7.1.min.js”></script>
<script src=”<%= request.getContextPath()%>/decorators/javascripts/jquery.datepick.pack.js”></script>
<link rel=”stylesheet” media=”screen” type=”text/css” href=”<%= request.getContextPath()%>/decorators/css/datepicker.css” />
<script type=”text/javascript” src=”<%= request.getContextPath()%>/decorators/javascripts/datepicker.js”></script>
CSS and JS File can be found here. http://tahsinz.com/wp-content/uploads/2014/01/DatePicker.zip
Add the fields where you want calender
Please note, the fields having the calender will have a image with class “cal-img-multiple”.
<form:form method=”POST” name=”trackingruns” id=”trackingruns” modelAttribute=”trackRunForm” class=”new”>
<fieldset class=”divided_fieldset”>
<dl class=”left”>
<dt><label>Pay Ending From: </label></dt>
<dd ><form:input class=”payEnding” path=”FromPayEndingDate” size=”30″ value=””/>
<img class=”cal-img-multiple” src=”<%= request.getContextPath()%>/decorators/images/calendar.gif” alt=”Calendar” /> </dd><dt><label>Cheque Date From: </label></dt>
<dd ><form:input class=”payEnding” path=”FromChequeDate” size=”30″ value=””/>
<img class=”cal-img-multiple” src=”<%= request.getContextPath()%>/decorators/images/calendar.gif” alt=”Calendar” /> </dd><dt><label>Run Number From</label></dt>
<dd><form:input path=”FromRunNumber” /><dt><label> </label></dt>
<dd><input type=”submit” class=”button” value=”Run Report”/></dd>
</dl>
<dl class=”right”>
<dt><label>To: </label></dt>
<dd ><form:input class=”payEnding” path=”ToPayEndingDate” size=”30″ value=””/>
<img class=”cal-img-multiple” src=”<%= request.getContextPath()%>/decorators/images/calendar.gif” alt=”Calendar” /> </dd><dt><label>To: </label></dt>
<dd ><form:input class=”payEnding” path=”ToChequeDate” size=”30″ value=””/>
<img class=”cal-img-multiple” src=”<%= request.getContextPath()%>/decorators/images/calendar.gif” alt=”Calendar” /> </dd><dt><label>To: </label></dt>
<dd><form:input path=”ToRunNumber” />
</dl>
</fieldset>
</form:form>
Add Jquery to handle the effects and updating the value in fields
$(function() {
$(“.cal-img-multiple”).hover(function(){
//alert($(this).siblings(‘.payEnding’).val());
payEndingElem = $(this).siblings(‘.payEnding’);$(this).DatePicker({
date: payEndingElem.val(),
starts: 1,
position: ‘right’,
onBeforeShow: function(){
if(typeof($(this).attr(‘rel’)) == “undefined”)
product = payEndingElem;
else
product = $(‘input[name=”‘+$(this).attr(‘rel’)+'”]’);
$(‘.cal-img-multiple’).DatePickerSetDate(product.val(), true);
},
onChange: function(formatted, dates){
if(typeof($(this).attr(‘rel’)) == “undefined”) {
product = payEndingElem;
} else {
product = $(this).data().datepicker.el;
product = $(‘input[name=”‘+$(product).attr(‘rel’)+'”]’);
}
$(product).val(formatted);
}
});
});});