根據日期選擇器設置和獲取年齡

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>