根据日期选择器设置和获取年龄

Question

我问了一个类似的问题，但找不到合适的解决方案。我使用了一个代码来动态生成输入字段，其中包含日期字段，后跟年龄。

我正在尝试jQuery的datepicker类来选择日期和每个年龄字段计算基于这些选择日期。

问题是我不知道如何设置年龄输入字段的值。尝试和搜索大量的帖子，这可能是一个简单的修复，但由于我不太熟悉jQuery方法，我没有运气得到它。

请参阅摘自我的代码：

$(document).on('click', '.datepicker', function() { 
 

 
    $(this).datepicker('destroy').datepicker({ 
 
     onSelect: function(value, ui) { 
 
     var dob = new Date(value), 
 
     today = new Date(), 
 
     age = new Date(today - dob).getFullYear() - 1970; 
 
     $('.age').find('input').val(age); 
 
     }, 
 
     
 
     changeMonth: true, 
 
     changeYear: true, 
 
     dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Title: 
 
<input class="form-control" type="text" name="firstname[]" value="" size="30" /> 
 
Date: 
 
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> 
 
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" /> 
 
<a href="#" 
 
class="remove">Remove</a></p>

我试过文本（），HTML（），VAL（）与其他许多方法，但没有任何工程。上面的问题是在'dob'输入中将值设置为id。我宁愿让它出现在“年龄”输入字段的VALUE中。希望我正确解释我的问题。

Answer 1

至于你提到你的问题，你要添加多个输入（日期）动态其次是年龄字段。因此，使用简单的类$（“。age”）或id $（'＃age'）选择器不适用于您。如果你使用$（“。age”）.val（age），它会改变所有输入与类年龄的值，如果你使用$（“＃年龄”）.val（年龄）它将只更新值用于第一次与id时间匹配的输入。

所以，你需要使用closest()与find()这样的：

$(ui.input).closest("p").find('.age').val(age); 

OR

使用siblings()选择这样

$(ui.input).siblings(".age").val(age); 

我希望这会帮助你。

$(document).on('click', '.datepicker', function() { 
 
    //don't add datepicker again if already exist 
 
    if (!$(this).hasClass("hasDatepicker")) { 
 
    $(this).datepicker({ 
 
     onSelect: function(value, ui) { 
 
     var dob = new Date(value), 
 
      today = new Date(), 
 
      age = today.getFullYear() - dob.getFullYear(); 
 
     $(ui.input).closest("p").find('.age').val(age); 
 
     //$(ui.input).siblings(".age").val(age); 
 
     }, 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     dateFormat: "yy-mm-dd", 
 
     yearRange: "1900:+10", 
 
     showOn: 'focus' 
 
    }).focus(); 
 
    } 
 
}); 
 

 
$(document).on('click', "#add", function() { 
 
    $(".wrapper").append('<p class="user-row">Title: ' + 
 
    '<input class="form-control" type="text" name="firstname[]" value="" size="30" />' + 
 
    'Date: <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />' + 
 
    'Age: <input type="text" class="form-control age" name="age[]" value="" size="10" />' + 
 
    '<a href="#" class="remove"> Remove</a> </p>'); 
 
}); 
 

 
$(document).on('click', '.remove', function() { 
 
    $(this).closest("p").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="wrapper"> 
 
    <p class="user-row">Title: 
 
    <input class="form-control" type="text" name="firstname[]" value="" size="30" /> Date: 
 
    <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> Age: <input type="text" class="form-control age" name="age[]" value="" size="10" /> 
 
    <a href="#" class="remove">Remove</a> 
 
    </p> 
 
</div> 
 
<button id="add" type="button">ADD</button>

Answer 2

你只需要在你的代码

$('.age').find('input').val(age); 

删除find('input')到

$('.age').val(age); 

因为与$('.age')你已经找到了输入，无需使用find再次找到它。用于查找文件是here

描述：获取每个元素的后代在当前匹配的元素，通过一个选择器，jQuery对象，或元件过滤。

Answer 3

1. 更改日期格式"mm/dd/yy"
2. 应该是$('#age').val(age);

<script type="text/javascript"> 
    jQuery(document).on('click', '.datepicker', function() { 

     $(this).datepicker('destroy').datepicker({ 
      onSelect: function(value, ui) { 
       var dob = new Date(value), 
        today = new Date(), 
        age = new Date(today - dob).getFullYear() - 1970; 
       $('#age').val(age); 
      }, 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: "mm/dd/yy", 
      yearRange: "1900:+10", 
      showOn:'focus' 
     }).focus(); 
    }); 
</script> 

古德勒克上编码！

Answer 4

您需要删除.find(input)，因为$('.age')应该完成这项工作。另外，你需要为datepicker包含jquery-ui。以下应该做的伎俩。

$(document).on('click', '.datepicker', function() { 
 

 
    $(this).datepicker('destroy').datepicker({ 
 
     onSelect: function(value, ui) { 
 
     var dob = new Date(value), 
 
     today = new Date(), 
 
     age = new Date(today - dob).getFullYear() - 1970; 
 
     $('.age').find('input').val(age); 
 
     }, 
 
     
 
     changeMonth: true, 
 
     changeYear: true, 
 
     dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus(); 
 
});

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

 
<p>Title: 
 
<input class="form-control" type="text" name="firstname[]" value="" size="30" /> 
 
Date: 
 
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> 
 
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" /> 
 
<a href="#" 
 
class="remove">Remove</a></p>