jQuery选择功能在生日而非输入类型日期自动老化

Question

当用户选择月份，日期和年份时，如何进行自动计算年龄。 我有一个代码，它可以自动计算年龄。 但是我想拥有而不是输入。 请帮我解决这个问题:(

这是我的输入type =“ date”

<input type="text" class="form-control" placeholder="Age" disabled id="age" name="age">

这是我的Jquery

 $("#dateofbirth").change(function(){
            var today = new Date();
            var dob = new Date($("#dateofbirth").val());
            var age = new Date(today - dob).getFullYear() -1970;
            $("#age").val(age);

});

这是JSFIDDLE，适用于输入Type =“ date”

请帮助我将其转换为如下所示的选择

<select class="form-control" id="dob-month">
    <option value="0">Month</option>
    <option value="January">January</option>
    ...
</select>

<select class="form-control" id="dob-day">
    <option value="0">Day</option>
    <option value="1">1</option>
    ...
</select>

<select name="b2byear" class="form-control col-sm-3" id="dob-year">
    <option value="0">Year</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    ...
</select>

它将在这里自动计算：

 <input type="text" class="form-control" placeholder="Age" disabled id="age" name="age">

Answer 1

在这里，您将使用DEMO 。 我为您的每个select添加了一个class 。 请参阅内联注释以获得更详细的解释！

$('.year,.month,.day').on('change',function(){ //call change function on all 3 select dropdowns
    var selectedYear=$('.year').find('option:selected').val();//get selected year
    var selectedDay=$('.day').find('option:selected').val();//get selected day
    var selectedMonth=$('.month').find('option:selected').val(); //get selected month
    if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0) //check if all the 3 dropdown values are selected
    {
        var today = new Date();
        var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear); //convert to a valid date
        var age = new Date(today - dob).getFullYear() -1970; //calculate age
        $("#age").val(age);//display it
    }
})

---

UPDATE

演示的一些变化：

$('.year,.month,.day').on('change',function(){
    var selectedYear=$('.year').find('option:selected').val();
    var selectedDay=$('.day').find('option:selected').val();
    var selectedMonth=$('.month').find('option:selected').val();
    if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0)
    {
        var today = new Date();
        var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);
        var age = today.getFullYear() - dob.getFullYear();//just get it directly here
        $("#age").val(age);
    }
})

---

演示 2更新

$('.year,.month,.day').on('change',function(){

    var selectedYear=$('.year').find('option:selected').val();
    var selectedDay=$('.day').find('option:selected').val();
    var selectedMonth=$('.month').find('option:selected').val();
    if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0)
    {
        var today = new Date();
        var dob=new Date(selectedYear,(selectedMonth-1),selectedDay); //convert to date in this format
        var age = today.getFullYear() - dob.getFullYear();//just get it directly here
        $("#age").val(age);
    }

})

---

用演示 更新3

表单的HTML标准似乎使得禁用的输入元素不会对表单名称/值集合起作用。

因此，您将无法捕获禁用字段的值，我建议，与其将输入字段设置为disabled ，还不如将它设置为readonly并添加一个类，以使其感觉被disabled ，并添加一些样式，如下所示：

CSS

.readoly{
    color:darkgray;
    background-color: rgb(235, 235, 228);
    border:1px solid !important;
}

Answer 2

试试这个演示场

 $('#dob-day,#dob-year,#dob-month').on('change',function(){

    var today = new Date();
    var dob=new Date($('#dob-month').val()+"/"+$('#dob-day').val()+"/"+                $('#dob-year').val());
    console.log(dob);
    var age = new Date(today - dob).getFullYear() -1970;
    $("#age").val(age);


        });