Javascript 如何让多个日期选择器使用altFields？

在我的应用程序中，我有一个

发票

表单，可以有多个

项目

。每个项目都有一个日期，由一个输入字段（用户可以在其中以自己喜欢的格式输入日期）和一个隐藏字段（提交表单时发送到数据库）组成。每个项目都会通过jQuery动态添加到发票中

<div class="item">
  <input class="display_date" id="display_date_1" type="text" value="15.08.2014">
  <input class="real_date" id="real_date_1" type="text" value="2014-08-15">
  ...
</div>

<div class="item">
  <input class="display_date" id="display_date_2" type="text" value="16.08.2014">
  <input class="real_date" id="real_date_2" type="text" value="2014-08-16">
  ...
</div>

<div class="item">
  <input class="display_date" id="display_date_3" type="text" value="17.08.2014">
  <input class="real_date" id="real_date_3" type="text" value="2014-08-17">
  ...
</div>

感谢您的帮助。

这里是一个包含三个动态创建的输入字段的示例，所有字段都链接到datepicker命令。似乎有效

JS

$（'.holder'）。追加（“”）；
var mydatepicker=$（“#testinput1，#testinput2，#testinput3”）.datepicker（）；
$（'input'）。在（'click'，function（）上{
var myinput=$（this.attr（'id'）；
$（'#'+myinput）.datepicker（'show'）；
});

您需要将目标ID指定为alt字段

试试这个：

<div class="item">
  <input class="display_date" data-target-id="real_date_1" type="text" value="15.08.2014">
  <input class="real_date" id="real_date_1" type="text" value="2014-08-15">
  ...
</div>

<div class="item">
  <input class="display_date" data-target-id="real_date_2" type="text" value="16.08.2014">
  <input class="real_date" id="real_date_2" type="text" value="2014-08-16">
  ...
</div>

<div class="item">
  <input class="display_date" data-target-id="real_date_3" type="text" value="17.08.2014">
  <input class="real_date" id="real_date_3" type="text" value="2014-08-17">
  ...
</div>

---

您可以为它们提供相同的类，然后在datepicker中调用该类。这不起作用，因为我正在通过jQuery动态添加项。谢谢，但是使用数据属性和使用id有什么区别？我的数据属性包含altField的id。您不能两次使用ID，所以我将其作为数据属性来存储其他元素ID。很好的解决方案，

每个

包装器就是关键。非常感谢。

$('.holder').append("<input class='display_date' id='testinput1' type='text' /><input class='display_date' id='testinput2' type='text' /><input class='display_date' id='testinput3' type='text' />");

var mydatepicker = $('#testinput1, #testinput2, #testinput3').datepicker();

$('input').on('click', function(){
                                  var myinput = $(this).attr('id');
                                  $('#'+myinput).datepicker('show');
                                  });

<div class="item">
  <input class="display_date" data-target-id="real_date_1" type="text" value="15.08.2014">
  <input class="real_date" id="real_date_1" type="text" value="2014-08-15">
  ...
</div>

<div class="item">
  <input class="display_date" data-target-id="real_date_2" type="text" value="16.08.2014">
  <input class="real_date" id="real_date_2" type="text" value="2014-08-16">
  ...
</div>

<div class="item">
  <input class="display_date" data-target-id="real_date_3" type="text" value="17.08.2014">
  <input class="real_date" id="real_date_3" type="text" value="2014-08-17">
  ...
</div>

$(function() {

  $('.display_date').each(function(){

    $(this).datepicker({
        dateFormat: "dd M yy", // format shown to the user
        altField: "#" + $(this).data('target-id'),
        altFormat: "yy-mm-dd" // format for database processing
      });
    });

});