動態創建的輸入上的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

更改此代碼：

$('<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的所有內容，包括以前添加的所有項目，從而將新選項應用於舊的datepicker。

Answer 2

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

 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，但您可以在.on處理程序中使用代碼，因為它位於.live代碼中。

Answer 3

這使用jQuery 1.9.1

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

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

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'));
  });
});