Thursday 11 April 2013

Jquery Datepicker with Age count function



<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">
function cal_age() {
var bday=(document.getElementById("dateofbirth").value);
 
var spl =  bday.split("/");
var bdate = spl[0];
var bmonth = spl[1];
var byear = parseInt(spl[2]);
//alert(byear);
//var bmo=(parseInt(document.getElementById("selMonths").value)-1);
//var byr=parseInt(document.getElementById("selYears").value);
var age;
var now = new Date();
tmo=(now.getMonth());
tday=(now.getDate());
//alert(tday);
var tyr=parseInt(now.getFullYear());
{
if(tyr > byear)
{age=byear}
  else
{age=byear}
document.getElementById("txtApAge").value=(tyr-age);
}
}

</script>

<script type="text/javascript">
$(document).ready(function(){
// $("#dateofbirth").datepicker({ 
 //  dateFormat: 'yy-mm-dd',
//   showAnim: 'slideDown',
// changeMonth: true,
// yearRange: '1950:2012',
// changeYear: true }); 
 $('#dateofbirth').datepicker({
changeMonth: true,
showAnim: 'slideDown',
changeYear: true,
maxDate:0,
dateFormat: 'dd/mm/yy',
      yearRange: '1950:+0'});
});
</script>
<style type="text/css"> 
      .ui-datepicker
       {
           font-size: 8pt;
           font-family: Verdana;
       }       
</style>
  <table>
      <tr id="trOdd">
<td width="15%">
<b>Date of Birth :</b><font size="2" color="#FF0000"> </font>
</td>
<td>
 <input type="text" size="20" name="dateofbirth" id="dateofbirth" readonly="readonly" onchange="cal_age();" maxlength="100" ></input>
</td>
<td width="29%"><B>AGE :</B><font size="2" color="#FF0000"> </font>
<input type="text" name="txtApAge" id="txtApAge" size="5" maxlength="4" readonly />&nbsp;&nbsp;<b></b>
  </td>
</tr>
</table>
<a href="http://jqueryui.com/datepicker/" target="_blank">download datepicker Widgets</a>  


2 comments: