CODEWITHSUNDEEP
javascriptjqueryhtml
Bala
Bala

Reputation: 3638

how to add date picker to a textbox in a div which has display none?

I have a text box in a div whose display is none by default and it will display only when a link is clicked. I tried to add date picker in the textbox inside the hidden div. but i couldn;t do it as the date picker is nt displaying. if code is needed for this tip. i can provide or if more explainations,i can provide that too..please help me how to over come this problem.

Note : the datepicker works in other fields which are visible. but not working with the textbox in the hidden div. Below is the HTML Code of the div and the text field with nxt_date is the field where i wanna add date picker.

The below div will be the innerHTML of another div when a link is clicked. I have added the JS function below for the link.

This is the link which triggers editor function : 

<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>

Upvotes: 2

Views: 2475

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

I think it's not working because you expect the datepicker to be copied (created) when you set the innerHTML of the "payDiv" from the "shwDiv".

First of all, there are some inconstancies in your code:

  • You tags have several times a classattribute: <input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />

  • Your elements have IDs. If you copy the innerHTML from one div to the other, you will have multiple time the same ID which is not allowed. Use the name attribute.

To correct your situation, do this:

You have to initialize again the datePicker instance for the field in the "payDiv" after you set the 'innerHTML'.

    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;?>');
}

Upvotes: 1

Related Questions