<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Pension Calculator</title>
<link rel="stylesheet" href="js1/jquery.mobile-1.4.3.css" type="text/css"/>
<link rel="stylesheet" href="js1/jquery.mobile.structure-1.4.3.min.css">
<script src="js1/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js1/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script>
<script src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(document).on('pagecreate', '#page1', function() {
// Do some processing when the button with id 'calc' is clicked or tapped
$('#calc').on('click', function() {
//event.preventDefault();
var basic = parseInt($('#basic').val()),
da = parseInt($('#da').val()),
years = parseInt($('#years').val()),
ca = parseInt($('#ca').val()),
el = parseInt($('#el').val()),
days = parseInt($('#days').val()),
// comperc = parseInt($('#comperc').value()),
da1 = 0,
pbasic = 0,
commute = 0,
gratuity = 0,
familyp = 0,
familyp1 = 0,
cp = 0,
total = 0;
// basic = basic + (basic*da/100);
pbasic = basic/2;
da1 = pbasic*da/100;
gratuity = (basic + da)*15/26 * years; // gratuity formula
commute = (pbasic*ca/100)*8.27 *12; // 8.27 is the commutation value at the age of 60 as per 6th CPC
familyp = (basic*30/100); // family pension is 30% of basic
familyp1 = familyp + (familyp*da/100);
if (gratuity > 1000000)
gratuity = 10000000;
total = (pbasic + da1);
if (commute > 0)
cp = (pbasic*ca/100) + da1;
else
(commute = 0)
if (days >300)
days = 300;
el = basic/30*days;
gratuity = gratuity.toFixed(2);
el = el.toFixed(2);
pbasic = pbasic.toFixed(2);
cp = cp.toFixed(2);
commute = commute.toFixed(2);
total = total.toFixed(2);
familyp = familyp.toFixed(2);
familyp1 = familyp1.toFixed(2);
//familyp = familypFixed(2);
// $('#results #gratuity').text(gratuity);
// $('#results #pbasic').text(pbasic);
//$('#results #total').text(total);
$('#datepicker').val(datepicker);
$('#results #gratuity').val(gratuity);
$('#results #el').val(el);
$('#results #pbasic').val(pbasic);
$('#results #total').val(total);
$('#results #cp').val(cp);
$('#results #commute').val(commute);
$('#results #familyp').val(familyp);
$('#results #familyp1').val(familyp1);
});
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<header data-role="header">
<h2>Pension Calculator</h2>
<img src="banner5.jpg" width="562" height="95">
</header>
<div role="main" class="ui-content">
<form id="theForm">
<div data-role="fieldcontain" data-inset="true" >
<label for="birth_date">Date of Birth</label>
<input type="text" name="birth_date" id="datepicker" autofocus required />
</div>
<script>
$(document).ready(function(){
$('#datepicker').datepicker({changeMonth: true, changeYear: true, dateFormat: 'dd-mm-yy'});
});
</script>
<div data-role="fieldcontain" data-inset="true" >
<label for="basic">Present Basic</label>
<input type="number" name="basic" id="basic" value="0" autofocus required />
</div>
<div data-role="fieldcontain">
<label for="years">Years of Service</label>
<input type="number" name="years" id="years" value="0" required />
</div>
<div data-role="fieldcontain">
<label for="da">Existing DA (%)</label>
<input type="number" name="da" id="da" value="0" required />
</div>
<div data-role="fieldcontain">
<label for="ca">Commutation if any (%)</label>
<input type="number" name="ca" id="ca" value="0" required />
</div>
<div data-role="fieldcontain">
<label for="el">Earned Leave Nos.</label>
<input type="number" name="days" id="days" value="0" required />
</div>
<a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a>
<div data-role="fieldcontain" data-inset="true">
<input type="button" onclick="myFunction()" id="theForm" data-icon="gear" value="Reset Values">
</div>
<script>
function myFunction() {
document.getElementById("theForm").reset();
}
</script>
<a id="help" href="#help" data-role="button" data-icon="info">Help</a>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>© Ranjan Mitra 2014</h3>
</div>
</form>
</div>
</div>
<div id="help" data-url="help" data-role="page" data-theme="b">
<div data-role="header">
<h2>Help</h2>
<img src="help1.jpg" width="561" height="64">
</div>
<div data-role="content">
<p>
<p>This is a very simple Pension Calculator for Central Govt. Emplyees. The results are apprroximate only.</p>
<p> 1. In the first text box enter your basic (Which is Basic + Grade Pay) the NPA stands for Non Practising Allowance which is applicable for Govt. Doctors, Lawyers etc.,
if you receive any NPA please add it also (Basic + GP + NPA)</p>
<p> 2. In the second text box enter completed years of service. </p>
<p> 3. In the third text box enter the current DA rate without the percent (%) sign.</p>
<p> 4. Now click the calculate button. You will get your Gratuity amount, Basic Pension amount
and your Pension.</p>
<p> 5.Click the the reset button to calculate agian or with a different set of values.</p>
<p> 6.Ceiling on all gratuities has been raised to Rs. ten lakhs w.e.f 01.01.2006 (earlier the limit was Rs.3.5 lakhs). DA admissible on the date
of retirement has also been added with pay for calculation of gratuity.</p>
<p> 7. For payment of commutation amount the Commission has noted that various factors suggest that the procedure of restoration of commuted amount after 15years appears to be more than fair. Age Factor has been calculated as per 6th CPC Age = 60 Factor = 8.287</p>
<p> 8. Earned Leave encashment has been calculated on the basis of maximum 300 days as allowed. Any ammount enterd greater than 300 will only calculate the maximum days allowed.</p>
<p> *(To go to a previous page click your mobile phones back button).</p>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>© Ranjan Mitra 2014</h3>
</div>
</div>
<div id="results" data-url="results" data-role="page" data-theme="b">
<div data-role="header">
<h2>Results</h2>
<img src="banner4.jpg" width="562" height="95">
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain" >
<label for="datepicker">Your Date of Retirement:</label>
<input type="text" style="color:#FFFF00;" name="datepicker" id="datepicker" readonly/>
</div>
<div class="ui-field-contain" >
<label for="gratuity">Your Gratuity:</label>
<input type="text" style="color:#FFFF00;" name="gratuity" id="gratuity" value="0" readonly/>
</div>
<div class="ui-field-contain" >
<label for="el">EL Encashed Amount:</label>
<input type="text" style="color:#FFFF00;" name="el" id="el" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="pbasic">Your Basic Pension:</label>
<input type="text" style="color:#00FF00" name="pbasic" id="pbasic" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="total">Your Pension:</label>
<input type="text" style="color:#FF0000" name="total" id="total" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="commute">Commuted Amount Received:</label>
<input type="text" style="color:#FFFF00" name="commute" id="commute" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="cp">Your Reduced Pension:</label>
<input type="text" style="color:#FF00FF" name="cp" id="cp" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="familyp">Family Basic Pension:</label>
<input type="text" style="color:#00FF00" name="familyp" id="familyp" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="familyp1">Family Pension:</label>
<input type="text" style="color:#FF0000" name="familyp1" id="familyp1" value="0" readonly/>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>© Ranjan Mitra 2014</h3>
</div>
</body>
</html>
计算效果很好。 1.添加了datepicker。 2.添加了datepicker的文本框 3.在结果表单中添加了计算退休年龄的文本框。 现在计算不起作用！ 如何以dd / mm / yy格式显示退休日期，计算自出生日期起60年？ 示例：如果dob = 1.1.1949，则显示的退休日期应为2009年1月31日，并且每个月的类似情况。如果dob = 2.3.1950，则显示的退休日期应为30.3.2010。 无法弄清楚需要帮助。
答案 0 :(得分：1)
您可以在http://api.jqueryui.com/datepicker/#option-yearRange
yearRange: '2004:2024', // specifying a hard coded year range
dateFormat: 'dd-mm-yy' //date format