克隆表单后,Yii CJuiDatePicker无法正常工作

时间:2013-10-19 05:38:38

标签: php jquery yii clone jquery-ui-datepicker

在此处发布问题之前,我尝试了this 。但不幸的是,没有什么对我有用。

CJuiDatePicker在克隆表单后无效。

以下是我的克隆代码:

function addCloneRow(id) {

    var TBLMAGIC = document.getElementById(id);
    var tBody = TBLMAGIC.getElementsByTagName("tbody")[0];
    var trTable = tBody.getElementsByTagName("tr")[1];
    var trClone = trTable.cloneNode(true);
    if (trClone) {
        var txt = trClone.getElementsByTagName("input");
        var lbl = trClone.getElementsByTagName("label");
        var dd = trClone.getElementsByTagName("select");

        for (var j = 0; j < lbl.length; j++) {
            var cls = lbl[j].className;
            if (cls == "error")
                lbl[j].innerHTML = "";
        }

        for (var i = 0; i < dd.length; i++) {
            dd[i].options[0].selected = true;
            var nm = dd[i].name;
            //var nNm = nm.substring((nm.indexOf("_") + 1), nm.indexOf("["));
            var nNm = nm.substring(0, nm.lastIndexOf("["));
            dd[i].name = nNm + "[]";

            if (nNm === "tableColumnName") {
                dd[i].options.length = 0;
                dd[i].options[0] = new Option("Select Column Name", "");
                dd[i].options[0].selected = true;
            }
        }
        for (var j = 0; j < txt.length; j++) {

            txt[j].setAttribute("style", "border: 1px solid #DDD; color:#000;");
            var nm = txt[j].name;

            var nNm = nm.substring(0, nm.lastIndexOf("["));

            txt[j].name = nNm + "[]";

            if (txt[j].type == "text" || $(txt[j]).attr("class") == "cblank") {
                txt[j].value = "";
            } else if (txt[j].type == "checkbox") {
                txt[j].checked = false;
            }
        }
        tBody.appendChild(trClone);
    }
}

这是我的日期选择器:

<td>                
                    <?php
                    $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                        'model' => $model,
                        'attribute' => 'start_date',
                        'htmlOptions' => array(
                            'size' => '10', // textField size
                            'maxlength' => '10', // textField maxlength                        
                            'class' => "input-small required",
                            'placeholder' => 'DOB',
                            'value' => $value['start_date'],
                            'name' => 'start_date[' . $index_startdate . '][]',
                        ),
                        'options' => array(
                            'showAnim' => 'fold',
                            'buttomImageOnly' => true,
                            'dateFormat' => 'yy-mm-dd',
                            'changeMonth' => true,
                            'changeYear' => true,
                            'yearRange' => '1900:2099',
                            'maxDate' => 'y-m-d', // maximum date
                        ),
                    ));
                    ?>
                    <i class="icon-2x icon-calendar"></i>
                </td>

我该如何解决这个问题?

由于

1 个答案:

答案 0 :(得分:0)

通过在克隆函数中添加以下行来解决自己:

var dateFieldLength = $("#" + id).find('input.date').length;
        $("#" + id).find('tr:last-child input.date').each(function(index) {
            var idCount = parseInt(index + dateFieldLength);
            $(this).removeClass("hasDatepicker");
            $(this).attr("id", id + "_" + idCount);
            $("#" + id + "_" + idCount).datepicker({
                maxDate: "y-m-d"
            });
        });
相关问题