javascript - Display age on selecting date from date picker - Stack Overflow

admin管理员组

文章数量:1419640

I have written following jQuery for calculating age when user selects date from date picker and the focus of textbox(#dobfield) is lost then the calculated age should get displayed on textbox (#age).

 function GetAge(dateString) {
      var today = new Date();
      var birthDate = new Date(dateString);
      var age = today.getFullYear() - birthDate.getFullYear();
      var m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
          age--;
      }
      return age;
  }

  $(document).ready(function() {

      $("#dobfield").onblur(function() {
          var dob = $("#dobfield").val().trim();
          var calculatedDob = GetAge(dob);
          $("#age").text(calculatedDob);
      });
  });

The html is as

        <input aria-required="true" id="dobfield" class="form-control" required="" type="text" onclick="css()">
        <input type="text" id="age" class="form-control" required>

The above code is not working!!!

Please help !!!

I have written following jQuery for calculating age when user selects date from date picker and the focus of textbox(#dobfield) is lost then the calculated age should get displayed on textbox (#age).

 function GetAge(dateString) {
      var today = new Date();
      var birthDate = new Date(dateString);
      var age = today.getFullYear() - birthDate.getFullYear();
      var m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
          age--;
      }
      return age;
  }

  $(document).ready(function() {

      $("#dobfield").onblur(function() {
          var dob = $("#dobfield").val().trim();
          var calculatedDob = GetAge(dob);
          $("#age").text(calculatedDob);
      });
  });

The html is as

        <input aria-required="true" id="dobfield" class="form-control" required="" type="text" onclick="css()">
        <input type="text" id="age" class="form-control" required>

The above code is not working!!!

Please help !!!

• javascript
• jquery

Share Improve this question Follow edited Sep 22, 2017 at 6:06 Nida asked Sep 22, 2017 at 5:55 NidaNida 1,70233 gold badges3636 silver badges7575 bronze badges 11

• include all relevant code to OP – guradio Commented Sep 22, 2017 at 5:57
• 1 Let us know what's not working. – Praveen Kumar Purushothaman Commented Sep 22, 2017 at 5:57
• age is calculated but is not displayed in age textbox – Nida Commented Sep 22, 2017 at 5:58
• .on("blur",function() ? – Shadow Fiend Commented Sep 22, 2017 at 5:59
• 2 @Nida use .val() instead of .text() when changing the input. – Shadow Fiend Commented Sep 22, 2017 at 6:34

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 2

All the ments and answers here are great. However, the only problem with your code was that you were using the incorrect method to update the textbox.

To change the text of an input field (textbox):

$("#inputId").val("new value");

To change the text of a different element (label, span, et.c.):

$("#otherId").text("new value");

Here is the exact example what you want. This function will calculate age as soon as you change the date from datepicker and it will show the age in the field. In this example #dob is datepicker field's id.

$('#dob').datepicker({
    onSelect: function(value, ui) {
        var today = new Date(),
            dob = new Date(value),
            age = new Date(today - dob).getFullYear() - 1970;

        $('#age').value(age);  // Changed it to `val()` as it is the textbox.
    },
    maxDate: '+0d',
    yearRange: '1920:2010',
    changeMonth: true,
    changeYear: true
});

jsfiddle

Check it out.

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/bootstrap.daterangepicker/2/daterangepicker.css" />



<input type="text" name="birthdate" value="10/24/1984" />

<input type="text" id="age" class="form-control" required readonly>

<script type="text/javascript">
        $(function() {
            $('input[name="birthdate"]').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true
            }, 
            function(start, end, label) {
                var years = moment().diff(start, 'years');
                alert("You are " + years + " years old.");
                $("#age").val("You are " + years + " years old.");
            });
        });
</script>

Example: https://jsfiddle/m2fdprrL/

Same with appending the result to age field. https://jsfiddle/m2fdprrL/2/

本文标签： javascriptDisplay age on selecting date from date pickerStack Overflow