Question

我在div中有一个文本框，默认情况下显示为none，只有在单击链接时才会显示。我试图在隐藏div中的文本框中添加日期选择器。但我无法做到，因为日期选择器不显示。如果此提示需要代码。我可以提供或者如果有更多解释，我也可以提供..请帮助我如何解决这个问题。

注意：datepicker适用于其他可见的字段。但不使用隐藏div中的文本框。下面是div的HTML代码，带有nxt_date的文本字段是我想要添加日期选择器的字段。

单击链接时，下面的div将是另一个div的innerHTML。我在下面为链接添加了JS函数。

这是触发编辑器功能的链接：

<a id='edit' style='cursor:pointer;' onClick='editor();'><b style='color:#689BB9;'>Add Payment</b></a>

JQUERY

$(function() {
  $("#nxt_date").date_input();
});
 $.extend(DateInput.DEFAULT_OPTS, {
  stringToDate: function(string) {
    var matches;
    if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
      return new Date(matches[1], matches[2] - 1, matches[3]);
    } else {
      return null;
    };
  },

  dateToString: function(date) {
    var month = (date.getMonth() + 1).toString();
    var dom = date.getDate().toString();
    if (month.length == 1) month = "0" + month;
    if (dom.length == 1) dom = "0" + dom;
    return  dom+ "-" + month + "-" + date.getFullYear();
  }
});

JAVASCRIPT

function editor(){
    val=document.getElementById("shwDiv").innerHTML;
    document.getElementById("payDiv").innerHTML=val; 
    document.getElementById('net_pay').value='<? echo $paid->net_payable;?>';
    document.getElementById('balance').value='<? echo $paid->balance_amount;?>';


    }

HTML

<div id="shwDiv" style="display:none">


    <table style="background-color:#CFE0EA;width:30px;font-size:13px;">

    <tr>
        <td>
            <strong>Netpay:</strong>
 <input type='text' id='netpaid' value = '<? echo$net1; ?>' class= 'box'size="3" readonly />
        </td>
        <td>
            <strong>Paid:</strong> <input type='text' value='<? echo $paid1; ?>' id='paid1' size="3" name='paid1' class="box" readonly />
            <input type='hidden' value='<? echo $paid1; ?>' id='paid1_hidden' size="3"></td>
        </td>
        <td>
            <strong>Balance:</strong>
            <input type='text' value='<? echo $balance1;?>' id='balance1' readonly size="3" class="box"/>
            <input type='hidden' value='<? echo $balance1;?>' id='balance1_hidden' />
        </td>

        <td>
            <strong>Paying&nbsp;now:</strong><br/><input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
        </td>
          <td>
            <strong>Due&nbsp;Date:</strong><input type='text' class="box" id='nxt_date' size="3"  />
        </td>
        <td><input type="button" value="Save" id="save" class="add_btn" onClick="pay_submit();" style="margin-top:10px;height:25px;"/></td> 
    </tr>
</table>


    </p>

    </div>

Answer 1

我认为它不起作用，因为当您从“shwDiv”设置“payDiv”的innerHTML时，您希望将日期选择器复制（已创建）。

首先，您的代码中存在一些不一致之处：

您的代码有多次class属性：<input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
您的元素有ID。如果将innerHTML从一个div复制到另一个div，则会有多次使用相同的ID，这是不允许的。使用name属性。

要纠正您的情况，请执行以下操作：

设置'innerHTML'后，必须再次初始化“payDiv”中字段的datePicker实例。

    function editor() {

    // always you 'var' to declare variables, otherwise they go to the global scope
    var shwDivContent = $('#shwDiv').html(),
        $payDiv = $('#payDiv');

    $payDiv.html(shwDivContent);

    // instanciate the datepicker in the 'payDiv'
    // assuming you have added a 'name' attribute to your field
    $payDiv.find('input[name=nxt_date]').date_input();

    $payDiv.find('input[name=net_pay]').val('<? echo $paid->net_payable;?>');
    $payDiv.find('input[name=balance]').val('<? echo $paid->balance_amount;?>');
}

如何在没有显示的div的文本框中添加日期选择器？

JQUERY

JAVASCRIPT

HTML

1 个答案: