Jquery datepicker動態創建的輸入更改第一個輸入的日期

Question

我添加日期輸入附加日期選擇器。

問題是：我在第一個輸入中選擇一個日期，然後嘗試在第二個或第三個或..輸入中選擇另一個日期。那麼，最後選擇的日期顯示在第一個輸入中，覆蓋已經選擇的日期，並將新輸入保留爲空白。

這是爲什麼？我該如何解決這個問題？

這裏的HTML：

<div id="main"> 
    <span> 
    <input type="text" id="mydate" name="mydate[]" class="datepicker"> 
    </span> 
    </div> 
    <a href="#" id="addInput">Add input</a> 

而這裏的JS：

var datePickerOptions = { 
     dateFormat: 'd/m/yy', 
     firstDay: 1, 
     changeMonth: true, 
     changeYear: true 
    } 

    $(document).ready(function() 
    { 
     $('.datepicker').datepicker(datePickerOptions); 

    }); 

    $(function() { 
    var scntDivA = $('#main'); 
    var ii = $('#main span').size() + 1; 

      $('#addInput').live('click', function() { 

        $('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA); 
        $('.datepicker').datepicker(datePickerOptions); 
        ii++; 
        return false; 
      }); 
    }); 

謝謝！

Answer 1

您可以查看下面的代碼。我們正在爲每個新添加的文本字段設置唯一類，並僅在新添加的文本字段上初始化日期選擇器。在你的代碼中，你正在重新初始化現有的文本域，因此之前選擇的日期被覆蓋。

var datePickerOptions = { 
 
    dateFormat: 'd/m/yy', 
 
    firstDay: 1, 
 
    changeMonth: true, 
 
    changeYear: true 
 
} 
 

 
$(document).ready(function() { 
 
    $('.datepicker').datepicker(datePickerOptions); 
 

 
    var scntDivA = $('#main'); 
 
    var ii = $('#main span').size() + 1; 
 

 
    $('#addInput').on('click', function() { 
 
    
 
    //adding the unique class like datepicker_number 
 
var newText = $("<input type=\"text\" id=\"mydate_"+ii+"\" name=\"mydate[]\" class=\"datepicker datepicker_"+ii+"\">"); 
 
    
 
    $(newText).appendTo(scntDivA); 
 
    
 
    //initializing the datepicker only on newly added textfield with class like datepicker_number 
 
    $('.datepicker_'+ii).datepicker(datePickerOptions); 
 
    ii++; 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script> 
 

 
<div id="main"> 
 
    <span> 
 
    <input type="text" id="mydate" name="mydate[]" class="datepicker"> 
 
    </span> 
 
</div> 
 
<a href="#" id="addInput">Add input</a>

注：上面的代碼段使用jQuery的1.11.0，但你可以，因爲它是你的.live代碼中.on處理程序中使用的代碼。

Answer 2

這用了jQuery 1.9.1

$(document).ready(function() 
{ 
    $('body').on('focus',".datepicker", function(){ 
      $(this).datepicker(datePickerOptions); 
    });​ 
}); 

工作小提琴：https://jsfiddle.net/khairulhasanmd/bLb047rL/2/

Answer 3

更改此代碼：

$('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA); 
$('.datepicker').datepicker(datePickerOptions); 

到

var inp = $('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA); 
inp.datepicker(datePickerOptions); 

當您使用.appendTo它返回附加的項目，在本例中爲新輸入，因此您不需要「重新找到」它。

當您使用$('.datepicker').時，它會找到包含所有以前添加的項目的.datepicker類的所有內容，從而將新選項應用於舊的日期選擇器。

Answer 4

只需爲所有初始輸入調用一次datepicker插件，併爲每個新創建的輸入調用一次。

http://codepen.io/kante/pen/ALRvqN

HTML：

<div id="main"> 
    <span> 
    <input type="text" id="mydate" name="mydate[]" class="datepicker"> 
    </span> 
</div> 
<a href="#" id="addInput">Add input</a> 

JS：

var datePickerOptions = { 
    dateFormat: 'd/m/yy', 
    firstDay: 1, 
    changeMonth: true, 
    changeYear: true 
} 

$(document).ready(function() { 
    $('.datepicker').datepicker(); 
    $('#addInput').live('click', function(){ 
    $input = $('<input type="text" name="mydate[]" />').datepicker(datePickerOptions); 
    $('<div>').html($input).appendTo($('#main')); 
    }); 
});