如何使用DatePicker设置年龄？
如何使用DatePicker设置年龄？
提问于 2020-11-09 23:54:03
当我更改日期选择器时，我试图在文本字段中显示年龄。当我选择一个日期时，该值不会显示在年龄文本字段中。如何在挑选日期时显示年龄？有没有更好的方法呢？
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})Stack Overflow用户
回答已采纳
发布于 2020-11-09 23:57:14
你有几个问题。首先，元素没有birthDate类，它是一个id。因此，选择器需要是#birthDate，而不是.birthDate。
其次，日期的格式将取决于用户的区域设置。例如，我的以YYYY-MM-DD格式显示。因此，您显式地指示momentJS解析DD/MM/YYYY格式的日期会导致读取错误。最好不要指定格式，让momentJS自己决定。
解决了这些问题后，尝试这样做：
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64754902
复制相关文章
相似问题
腾讯云开发者
