动态创建的输入上的 Jquery datepicker 更改第一个输入的日期

Question

我正在添加带有 datepicker 的日期输入。

问题是：我在第一个输入中选择了一个日期，然后我尝试在第二个或第三个或 .. 输入中选择另一个日期。好吧，这个最后选择的日期显示在第一个输入中，覆盖已经选择的日期，并将新的输入留空。

这是为什么呢？我该如何解决这个问题？

这是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>

注意：上面的代码 sn-p 使用 jQuery 1.11.0，但您可以在 .on 处理程序中使用代码，就像在您的 .live 代码中一样。

Answer 2

只需为所有初始输入调用一次 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'));
  });
}); 

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

更改此代码：

$('<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。