Question

我需要有一个datetimepicker来弹出日期输入字段，日期选择器在javascript函数中定义如下：

  function loadcalendar(){
   jQuery(function() { 
                            $('#ar_startdate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
                            $('#ar_enddate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
          });
 }

现在我在将输入字段作为行附加到表之后动态地将输入字段填充到表行中时调用加载日历像这样：

// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
    $("#table_newrole img.move-row").live("click", function() {
     $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" id="ar_startdate"></td><td>End Date: <input type="text" value="" id="ar_enddate </td></tr>');
   loadcalendar();

通过上面的设置，datepickers只显示在第一个iem中，所有输入文本字段共享相同的id，因此如何从索引创建id并在追加该行之后将每个id与datepicker相关联。问候， Priyank

Answer 1

以下内容可能有效：

var $tr = $('<tr><td>Start Date: <input type="text" value="" id="ar_startdate" /></td><td>End Date: <input type="text" value="" id="ar_enddate"/></td></tr>');

$('#ar_startdate', $tr).datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
$('#ar_enddate', $tr).datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
$("#table_rolecart tbody").append($tr);

此外，我宁愿将ar_startdate和ar_enddate作为类属性而不是id，因为ID在文档中应该是相同的。

Answer 2

确保您始终只有一个具有特定ID的元素。如果要添加多行，则需要使用类。试试这个：

 function loadcalendar(){
       $('.ar_startdate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
       $('.ar_enddate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
 } 
// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
     $("#table_newrole img.move-row").live("click", function() {
         $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
         loadcalendar();
     });
 });

我添加了.parsed以检查输入是否已被转换。我不知道你选择的插件是什么，但为了以防万一。无论如何，还有其他方法可以实现同样的目的，例如：

 var config = {
     dateFormat: 'yy-mm-dd',
     showSecond: true,
     timeFormat: 'hh:mm:ss'
 };
 var newRowAndBind = function(){
     var row = $('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
     row.find(".ar_startdate").datetimepicker(config);
     row.find(".ar_enddate").datetimepicker(config);
     row.appendTo("#table_rolecart tbody");
 };
 $(document).ready(function() {
     $("#table_newrole img.move-row").bind("click", newRowAndBind);
 });

为输入文本调用javascript，该输入文本是表中动态添加的行的一部分

2 个答案: