javascript - 日期选择器不适用于克隆行

Question

我找到了这个斑马日期选择器，但我的问题是日期在克隆行上不起作用......这是我的 fiddle 代码: html

 <DIV id="mainContent_pnlEmploymentHistory">
<form id="form1" name="form1" method="post" action="value.php">
<TABLE id="dataTable">
  <TBODY>
  <TR>
    <TD style="width: 310px; height: 20px; text-align: center;">Name of Employer</TD>
    <TD style="width: 430px; height: 20px; text-align: center;"> Employer Address</TD>
    <TD style="width: 150px; height: 20px; text-align: center;">FROM</TD>
    <TD style="width: 150px; height: 20px; text-align: center;">TO</TD></TR>
  <TR class="row_to_clone_fw_emp">
    <TD style="width: 310px; height: 20px; text-align: center;">
      <input type="text" id="fwemployer" name="fwemployer[]" style="width:300px"/>
    </TD>
    <TD style="width: 430px; height: 20px; text-align: center;">
    <input type="text" id="fwempaddress" name="fwempaddress[]" style="width:100%"/></TD>
    <TD>
    <input id="datepicker-example7-start" type="text" name="datefrom[]"/></TD>
    <TD>
    <input id="datepicker-example7-end" type="text"  name="dateto[]"/></TD>

  </TR>
      </TBODY>
</TABLE>
    <table>
  <tr>
<td colspan="3" align="right"><INPUT type="button" value="Add Row" id="addrow" onclick="addRowfwemp(); return false;"/></td>
<td  colspan="4" align="right"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>
</DIV>

JavaScript

$(document).ready(function() {

    $('#datepicker-example7-start').Zebra_DatePicker({
        direction: false,
        pair: $('#datepicker-example7-end')
    });

    $('#datepicker-example7-end').Zebra_DatePicker({
        direction: true
    });

});

$(document).ready(function(){
$( "#addrow" ).click(function() {

  var zdp = $('#datepicker-example7-start').data('Zebra_DatePicker');
  var zdp1 = $('#datepicker-example7-end').data('Zebra_DatePicker');
zdp.destroy();
zdp1.destroy();
});
});

function addRowfwemp() {
    /* Declare variables */
    var elements, templateRow, rowCount, row, className, newRow, element;
    var i, s, t;

    /* Get and count all "tr" elements with class="row".    The last one will
     * be serve as a template. */
    if (!document.getElementsByTagName)
        return false; /* DOM not supported */
    elements = document.getElementsByTagName("tr");
    templateRow = null;
    rowCount = 0;
    for (i = 0; i < elements.length; i++) {
        row = elements.item(i);

        /* Get the "class" attribute of the row. */
        className = null;
        if (row.getAttribute)
            className = row.getAttribute('class');
        if (className === null && row.attributes) {    // MSIE 5
            /* getAttribute('class') always returns null on MSIE 5, and
             * row.attributes doesn't work on Firefox 1.0.    Go figure. */
            className = row.attributes['class'];
            if (className && typeof(className) === 'object' && className.value) {
                // MSIE 6
                className = className.value;
            }
        } 

        /* This is not one of the rows we're looking for.    Move along. */
        if (className !== "row_to_clone_fw_emp")
            continue;

        /* This *is* a row we're looking for. */
        templateRow = row;
        rowCount++;
    }
    if (templateRow === null)
        return false; /* Couldn't find a template row. */

    /* Make a copy of the template row */
    newRow = templateRow.cloneNode(true);

    /* Change the form variables e.g. price[x] -> price[rowCount] */
    elements = newRow.getElementsByTagName("input");
    for (i = 0; i < elements.length; i++) {
        element = elements.item(i);
        s = null;
        s = element.getAttribute("name");
        if (s === null)
            continue;
        t = s.split("[");
        if (t.length < 2)
            continue;
        s = t[0] + "[" + rowCount.toString() + "]";
        element.setAttribute("name", s);
        element.value = "";
    }

    /* Add the newly-created row to the table */
    templateRow.parentNode.appendChild(newRow);
    return true;
}

http://jsfiddle.net/jakecruz011/ZvsZm/ ...它可能有点破损，因为我无法上传所有外部资源，但肯定有克隆方法以及如何调用日期选择器...

原始代码可以在这里找到(示例7):http://stefangabos.ro/jquery/zebra-datepicker/

github上的文件可以在这里下载:https://github.com/stefangabos/Zebra_Datepicker/

非常感谢您的帮助!将不胜感激...

Answer 1

将新元素追加到 DOM 后，您需要再次调用 datepicker 函数

我建议您为日期选择器输入字段添加一个公共(public)类。

<TD>
  <input id="datepicker-example7-start" type="text" name="datefrom[]" class="dp-start"/>
</TD>
<TD>
  <input id="datepicker-example7-end" type="text"  name="dateto[]"  class="dp-end"/>
</TD>

并在追加新行后调用日期选择器函数。

$('.dp-start:last').Zebra_DatePicker({
    direction: false,
    pair: $('.dp-end:last')
});

$('.dp-end:last').Zebra_DatePicker({
    direction: true
});

这个我没试过。希望它能发挥作用。