Question

在我的应用程序中，我有invoices的表单，其中可以有多个items。每个项目的日期都包含一个输入字段（用户可以在其首选格式中输入日期）和一个隐藏字段（在提交表单时将其发送到数据库）。使用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处理所有这些（动态添加的）项目？

这是我的jQuery，但它不起作用：

$(function() {

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

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

});

感谢您的帮助。

Answer 1

您希望将目标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>

使用：

$(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
      });
    });

});

Answer 2

这是一个FIDDLE，其中包含三个动态创建的输入字段，所有输入字段都链接到datepicker命令。似乎工作。

JS

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

如何让多个日期选择器与altFields一起使用？

2 个答案: