[英]Jquery Select Features auto age on Birthday instead of Input Type Date
How can I make auto compute age when the user select month, day and year. 当用户选择月份,日期和年份时,如何进行自动计算年龄。 I have a code for wherein it auto compute the age.
我有一个代码,它可以自动计算年龄。 But I want to have instead of input.
但是我想拥有而不是输入。 Please help me to fix this :(
请帮我解决这个问题:(
Here's my input type="date" 这是我的输入type =“ date”
<input type="text" class="form-control" placeholder="Age" disabled id="age" name="age">
Here's my Jquery 这是我的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);
});
Here's the JSFIDDLE Working For Input Type="date" 这是JSFIDDLE,适用于输入Type =“ date”
Please help me to convert it to select like this below 请帮助我将其转换为如下所示的选择
<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>
And it will auto compute in here: 它将在这里自动计算:
<input type="text" class="form-control" placeholder="Age" disabled id="age" name="age">
Here you go with DEMO . 在这里,您将使用DEMO 。 I've added a
class
for your each select
. 我为您的每个
select
添加了一个class
。 See inline comments for more detailed explaination! 请参阅内联注释以获得更详细的解释!
$('.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 UPDATE
Few Changes with DEMO : 演示的一些变化:
$('.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);
}
})
$('.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);
}
})
The HTML standard for forms appears to be such that disabled input elements do not contribute to the form name/value collection.
表单的HTML标准似乎使得禁用的输入元素不会对表单名称/值集合起作用。
So you won't get to capture the value of disabled field and I would suggest, instead of making input field disabled
make it readonly
and add a class to it to make it feel disabled
with some styles added to it as below: 因此,您将无法捕获禁用字段的值,我建议,与其将输入字段设置为
disabled
,还不如将它设置为readonly
并添加一个类,以使其感觉被disabled
,并添加一些样式,如下所示:
CSS CSS
.readoly{
color:darkgray;
background-color: rgb(235, 235, 228);
border:1px solid !important;
}
Try this DEMO FIDDLE 试试这个演示场
$('#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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.