title: Getting error in output text box
body: <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;meta content='width=device-width, initial-scale=1' name='viewport'/&gt;
  &lt;title&gt;jQuery UI Datepicker - Default functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="js1/jquery.mobile-1.4.3.css" type="text/css"/&gt;
  &lt;link rel="stylesheet" href="js1/jquery.mobile.structure-1.4.3.min.css"&gt;
  &lt;script src="js1/jquery-1.11.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js1/jquery.mobile-1.4.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" /&gt;
    &lt;script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
     $(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 &gt; 1000000)
              gratuity = 10000000;        
  
            total = (pbasic + da);
  
            if (  commute &gt; 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);
  
      });
  
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="page1" data-role="page" data-theme="b"&gt;
      &lt;header data-role="header"&gt;
          &lt;h2&gt;Pension Calculator&lt;/h2&gt;  
      &lt;img src="banner5.jpg" width="562" height="95"&gt;
      &lt;/header&gt;
  
  &lt;div role="main" class="ui-content"&gt;
          &lt;form id="theForm"&gt;
              &lt;div data-role="fieldcontain" data-inset="true" &gt;
                  &lt;label for="datepicker"&gt;Enter your Birth Date:&lt;/label&gt;
                  &lt;input type="number" name="datepicker" id="datepicker" value="0" autofocus required /&gt;
  
  &lt;link rel="stylesheet" href="jQ/jquery-ui.css"&gt;
  &lt;script src="jQ/jquery-1.10.1.js"&gt;&lt;/script&gt;
  &lt;script src="jQ/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
    $(function() {
  
      $( "#datepicker" ).datepicker();
  
    });
  
    &lt;/script&gt;
  
  
  
              &lt;/div&gt;
              &lt;div data-role="fieldcontain" data-inset="true" &gt;
                  &lt;label for="basic"&gt;Present Basic&lt;/label&gt;
                  &lt;input type="number" name="basic" id="basic" value="0" autofocus required /&gt;
              &lt;/div&gt;
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="years"&gt;Years of Service&lt;/label&gt;
                  &lt;input type="number" name="years" id="years" value="0" required /&gt;
              &lt;/div&gt;
  
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="months"&gt;Months of Service&lt;/label&gt;
                  &lt;input type="number" name="months" id="months" value="0" required /&gt;
              &lt;/div&gt;
  
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="da"&gt;Existing DA (%)&lt;/label&gt;
                  &lt;input type="number" name="da" id="da" value="0" required /&gt;
              &lt;/div&gt;
  
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="ca"&gt;Commutation if any (%)&lt;/label&gt;
                  &lt;input type="number" name="ca" id="ca" value="0" required /&gt;
              &lt;/div&gt;
  
               &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="el"&gt;Earned Leave Nos.&lt;/label&gt;
                  &lt;input type="number" name="days" id="days" value="0" required /&gt;
              &lt;/div&gt;
  
  
  
  
          &lt;a id="calc" href="#results" data-role="button" data-icon="gear"&gt;Calculate&lt;/a&gt;        
  
          &lt;div data-role="fieldcontain" data-inset="true"&gt;
  
         &lt;input type="button" onClick="myFunction()" id="theForm" data-icon="gear" value="Reset Values"&gt;
          &lt;/div&gt;
          &lt;script&gt;
      function myFunction() {
        document.getElementById("theForm").reset();
      }
  
      &lt;/script&gt;
  
          &lt;a id="help" href="#help" data-role="button" data-icon="info"&gt;Help&lt;/a&gt;    
  
  &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
           &lt;h3&gt;&amp;copy; Ranjan Mitra 2014&lt;/h3&gt;
  &lt;/div&gt;
     &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="help" data-url="help" data-role="page" data-theme="b"&gt;
    &lt;div data-role="header"&gt;
      &lt;h2&gt;Help&lt;/h2&gt;
       &lt;img src="help1.jpg" width="561" height="64"&gt;
       &lt;/div&gt;
       &lt;div data-role="content"&gt;
       &lt;p&gt;
       &lt;p&gt;This is a very simple Pension Calculator for Central Govt. Emplyees. The results are apprroximate only.&lt;/p&gt;
       &lt;p&gt; 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)&lt;/p&gt;
       &lt;p&gt; 2. In the second text box enter completed years of service. &lt;/p&gt;
       &lt;p&gt; 3. In the third text box enter the current DA rate without the percent (%) sign.&lt;/p&gt;
       &lt;p&gt; 4. Now click the calculate button. You will get your Gratuity amount, Basic Pension amount
         and your Pension.&lt;/p&gt;
       &lt;p&gt; 5.Click the the reset button to calculate agian or with a different set of values.&lt;/p&gt;
       &lt;p&gt; *(To go to a previous page click your mobile phones back button).&lt;/p&gt;
       &lt;/div&gt;
  
  
  &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
           &lt;h3&gt;&amp;copy; Ranjan Mitra 2014&lt;/h3&gt;
       &lt;/div&gt;
        &lt;/div&gt;
  
  
  
  
  &lt;div id="results" data-url="results" data-role="page" data-theme="b"&gt;
      &lt;div data-role="header"&gt;
          &lt;h2&gt;Results&lt;/h2&gt;
      &lt;img src="banner4.jpg" width="562" height="95"&gt;
      &lt;/div&gt;
      &lt;div role="main" class="ui-content"&gt;
  
  
      &lt;div class="ui-field-contain" &gt;
      &lt;label for="datepicker"&gt;Your Date of Retirement:&lt;/label&gt;
      &lt;input type="text" style="color:#FFFF00;" name="datepicker" id="datepicker" value="0" readonly/&gt;
          &lt;/div&gt;
  
  
  
  
      &lt;div class="ui-field-contain" &gt;
      &lt;label for="gratuity"&gt;Your Gratuity:&lt;/label&gt;
      &lt;input type="text" style="color:#FFFF00;" name="gratuity" id="gratuity" value="0" readonly/&gt;
          &lt;/div&gt;
  
       &lt;div class="ui-field-contain" &gt;
      &lt;label for="el"&gt;EL Encashed Amount:&lt;/label&gt;
      &lt;input type="text" style="color:#FFFF00;" name="el" id="el" value="0" readonly/&gt;
          &lt;/div&gt;
  
  
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="pbasic"&gt;Your Basic Pension:&lt;/label&gt;
      &lt;input type="text" style="color:#00FF00;" name="pbasic" id="pbasic" value="0" readonly/&gt;
           &lt;/div&gt;        
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="total"&gt;Your Pension:&lt;/label&gt;
      &lt;input type="text" style="color:#FF0000" name="total" id="total" value="0" readonly/&gt;
    &lt;/div&gt;
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="commute"&gt;Commuted Amount Received:&lt;/label&gt;
      &lt;input type="text" style="color:#FFFF00" name="commute" id="commute" value="0" readonly/&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="cp"&gt;Your Reduced Pension:&lt;/label&gt;
      &lt;input type="text" style="color:#FF00FF " name="cp" id="cp" value="0" readonly/&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="familyp"&gt;Family Basic Pension:&lt;/label&gt;
      &lt;input type="text" style="color:#3BB9FF" name="familyp" id="familyp" value="0" readonly/&gt;
    &lt;/div&gt;
  
      &lt;div class="ui-field-contain"&gt;
      &lt;label for="familyp1"&gt;Family Pension:&lt;/label&gt;
      &lt;input type="text" style="color:#3BB9FF" name="familyp1" id="familyp1" value="0" readonly/&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt; 
  &lt;/div&gt;
            &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
           &lt;h3&gt;&amp;copy; Ranjan Mitra 2014&lt;/h3&gt;
       &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am trying to implement datepicker with the output as date of retirement.
  1. Datepicker is not showing dropdown months and dropdown year options.
  2. The results output of Year of Retirement shows:[object HTMLInputElement].
  Where am I going wrong ? and how to correct this. Please help  </p>