如何將日期選擇器添加到沒有顯示的div中的文本框？

Question

我在div中有一個文本框，默認情況下不顯示該文本框，並且僅在單擊鏈接時才會顯示。 我試圖在隱藏的div內的文本框中添加日期選擇器。 但我無法做到這一點，因為日期選擇器正在顯示。 如果此技巧需要代碼。 我可以提供或者如果有更多解釋，我也可以提供..請幫助我如何克服這個問題。

注意：日期選擇器在其他可見字段中起作用。 但不能使用隱藏的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)" /> <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;?>');
}