Javascript 在输出文本框中获取错误
我正在尝试实现datepicker，并将输出作为退休日期。 1.Datepicker未显示下拉月份和下拉年份选项。 2.退休年份的结果输出显示：[object HTMLInputElement]。 我哪里做错了？以及如何纠正这一点。请帮助要使用datepicker获取年-月-日，请尝试以下操作：Javascript 在输出文本框中获取错误,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试实现datepicker，并将输出作为退休日期。 1.Datepicker未显示下拉月份和下拉年份选项。 2.退休年份的结果输出显示：[object HTMLInputElement]。 我哪里做错了？以及如何纠正这一点。请帮助要使用datepicker获取年-月-日，请尝试以下操作： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta cont
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>jQuery UI Datepicker - Default functionality</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()),
ca = parseInt($('#ca').val()),
el = parseInt($('#el').val()),
years = parseFloat($('#years').val()),
months = parseFloat($('#months').val()),
days = parseInt($('#days').val()),
// comperc = parseInt($('#comperc').value()),
pbasic = 0,
commute = 0,
years1 = 0,
gratuity = 0,
familyp = 0,
familyp1 = 0,
cp = 0,
total = 0;
// basic = basic + (basic*da/100);
years1 = years + (months/12);
pbasic = basic/2;
da = pbasic*da/100;
gratuity = (basic + da)*15/26 * years1;
commute = (pbasic*ca/100)*8.27 *12;
familyp = (basic*30/100);
familyp1 = familyp;
if (gratuity > 1000000)
gratuity = 10000000;
total = (pbasic + da);
if ( commute > 0 )
cp = (pbasic*ca/100) + da;
else
(commute = 0)
el = basic/30*days;
years1 = years1.toFixed(2);
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);
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
var today = new Date(),
dob = new Date(value),
age = ui.selectedYear + 60; //This is the update
$('#age').text(age);
},
maxDate: '+0d',
yearRange: '1920:2090',
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
});
//familyp = familypFixed(2);
// $('#results #gratuity').text(gratuity);
// $('#results #pbasic').text(pbasic);
//$('#results #total').text(total);
$('#results #datepicker').val(datepicker);
$('#results #years1').val(years1);
$('#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="datepicker">Enter your Birth Date:</label>
<input type="number" name="datepicker" id="datepicker" value="0" autofocus required />
<link rel="stylesheet" href="jQ/jquery-ui.css">
<script src="jQ/jquery-1.10.1.js"></script>
<script src="jQ/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</div>
<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="months">Months of Service</label>
<input type="number" name="months" id="months" 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> *(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" value="0" 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:#3BB9FF" name="familyp" id="familyp" value="0" readonly/>
</div>
<div class="ui-field-contain">
<label for="familyp1">Family Pension:</label>
<input type="text" style="color:#3BB9FF" 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>
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();
alert(day + '-' + month + '-' + year);
}