onSelect第一次后不起作用

Question

起初，我以为onSelect事件根本没有用。但是，当我第二次选择日期时，此功能可以完美运行。但是，当我加载网页时，它第一次不起作用。有人有主意吗？除了#dob，我没有其他任何事件。

$(document).ready(function(){
        var age= "";

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

                age = (today.getFullYear() - ui.selectedYear)*12;
                age -= ui.selectedMonth;
                age += today.getMonth();
                $('#age').val(age);
                console.log(ui.selectedYear);
                console.log(ui.selectedMonth);
                console.log(today);
            }
        })
    });

这是我的html

<div class="input_rv cal">
     <input type="text" id="dob">
     <img class="ui-datepicker-trigger" src="./resources/images/calender_icon.jpg" alt="..." title="...">
    <input type="text" id="age">
</div>

Answer 1

您可以尝试这个

function GetAge() {
    var dob = $('#dob').val();
    if (dob != '') {
        dob = new Date(dob);
        var today = new Date();
        var age = Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
        alert(age);
        $('#age').val(age + ' years old');
    }
}

$(document).ready(function() {
    $("#dob").datepicker().datepicker("setDate", new Date());
    GetAge();
    var age = "";
    $('#dob').on("change", function() {
        GetAge();
    });

})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="input_rv cal">
     <input class="date" id="dob">
    <input type="text" id="age">
</div>