动态创建的输入上的jQuery datepicker更改第一个输入的日期 [英] Jquery datepicker on dynamically created inputs changing the date of the first input

问题描述

我要添加带有日期选择器的日期输入.

I am adding date inputs with datepicker attached.

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

An the problem is: I pick a date in the first input and I try to pick another date in the second or third or .. inputs. Well, this last picked date shows in the first input, overwriting the already picked date, and leaves the new input blank.

那是为什么?我该如何解决?

Why is that? How can I solve this?

这是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;
            });
   }); 

谢谢！

推荐答案

您可以检查以下代码.我们将为每个新添加的文本字段设置唯一类，并仅在新添加的文本字段上初始化日期选择器.在您的代码中，您正在重新初始化现有的文本字段，因此先前选择的日期将被覆盖.

You can check below code. We are setting the unique class to each newly added text field and initializing the datepicker on newly added textfield only. In your code you were re-initializing the existing textfields hence previously selected dates were getting overridden.

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代码中.

Note: above code snippet uses jQuery 1.11.0 but you can use code within .on handler as it is within your .live code.

这篇关于动态创建的输入上的jQuery datepicker更改第一个输入的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！