Question

我写了以下jQuery来计算年龄，当用户从日期选择器中选择日期并且textbox(#dobfield)的焦点丢失，然后计算的年龄应该显示在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);
      });
  });

html是

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

以上代码无效!!!

请帮助!!!

Answer 1

以下是您想要的确切示例。一旦您从datepicker更改日期，此函数将计算年龄，它将在字段中显示年龄。在此示例中，#dob是datepicker字段的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

Answer 2

这里的所有评论和答案都很棒。但是，您的代码唯一的问题是您使用了不正确的方法来更新文本框。

要更改输入字段（文本框）的文本：

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

要更改其他元素的文本（label，span，et.c。）：

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

Answer 3

检查出来。

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

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

示例：https://jsfiddle.net/m2fdprrL/

将结果附加到年龄字段相同。 https://jsfiddle.net/m2fdprrL/2/

显示从日期选择器中选择日期的年龄

3 个答案: