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>&nbsp;</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);
}
});
});

});

Leave a Reply

Your email address will not be published.