Jquery选择功能自动年龄的生日,而不是输入类型日期
Jquery Select Features auto age on Birthday instead of Input Type Date
如何在用户选择月、日、年时自动计算年龄?我有一个可以自动计算年龄的代码。但是我想要的不是输入。请帮我解决这个问题:(
这里是我的输入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的输入类型="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">
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
}
})
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);
}
})
更新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
与一些样式添加到它如下:
.readoly{
color:darkgray;
background-color: rgb(235, 235, 228);
border:1px solid !important;
}
试试这个DEMO
$('#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);
});
相关文章:
- 当用户在文本框中输入日期时,如何计算一年的持续时间
- 如何在JavaScript中返回两个日期(当前日期和输入日期)之间的字符串差异
- 表格报告-动态比较特定用户的输入日期和现有日期
- HTML输入日期,响应所选值
- 使用奇怪的控制台日志结果向输入日期添加天数
- 如果输入日期大于js中定义的日期,如何发出警报
- Kendo ui Grid:标准的HTML5输入日期时间可以用作单元格编辑器吗
- 使用输入日期选取器中的值
- 按输入日期过滤 ng 重复
- 展开输入日期日历(浏览器本机)
- 设置用户输入日期的格式
- 在 angularjs 中继器内的输入日期上将字符串转换为日期
- 日期选择器始终以默认日期打开,而不是以没有 DAYS 的格式输入日期
- 在输入日期字段的多次迭代中加载日期选取器
- 如何在JavaScript中输入日期和时间以及位置
- 无法使用 jqxDateTimeInput 手动输入日期
- 检查输入日期是否在给定范围内
- 我可以使用 Jquery UI 日期选择器来更改键盘输入日期的格式吗?
- JavaScript - 输入日期,然后自动填充下一个字段的差异
- 本地输入日期时间的HTML 5表单验证