Home/ Questions/Q 6345621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:51:27+00:00

I am trying to figure out why my dynamically added input block (within the

  • 0

I am trying to figure out why my dynamically added input block (within the cell of a table) does not fire the datetime picker. I’ve provided a proof of concept block of code that demonstrates this issue. If you run this code as is, the default input tag (id: dti1) works perfectly and the datetime picker pops up and allows the user to select a date and time. However, when you click “Add Another”, the datetime picker does not pop up on the new input element, even though it shows up properly with the dtpick class properly associated with it. My assumption is that the datetime picker is associated with each dtpick class element on page load, so that’s why the datetime picker isn’t working. Is there any way to force that to happen when I dynamically add the row?

<html>
<head>
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here-->
<script>
  $(document).ready(function(){
   $('.dtpick').datetime({
     userLang   : 'en',
     americanMode: true});
   });
   function addItem() 
   {
    var t = document.getElementById('myTable');
        var row = t.insertRow(-1);
        var c1 = row.insertCell(0);

        var c1content=document.createElement("input");
        c1content.setAttribute("type","text");
        c1content.setAttribute("name","dtnew");
        c1content.setAttribute("id","dtinew");  
        c1content.setAttribute("class","dtpick");
        c1content.setAttribute("value","2011-08-20 01:00:00");

        c1.appendChild(c1content);  
   }
</script>
</head>
<body>
<table id="myTable">
<tr>
  <td><b>Row Header:</b></td>
</tr>
<tr>
  <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td>
</table><br>
<a onclick="addItem()"> Add another</a> 
</body>
</html>

Any assistance is greatly appreciated!

David

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After you’ve appended an item, you need to re-initialize your date picker widget. In other words, it should look like this:

    function addItem() 
{
    var t = document.getElementById('myTable');
    var row = t.insertRow(-1);
    var c1 = row.insertCell(0);

    var c1content=document.createElement("input");
    c1content.setAttribute("type","text");
    c1content.setAttribute("name","dtnew");
    c1content.setAttribute("id","dtinew");  
    c1content.setAttribute("class","dtpick");
    c1content.setAttribute("value","2011-08-20 01:00:00");

    c1.appendChild(c1content);

    $('.dtpick').datetime({
        userLang: 'en',
        americanMode: true});
    });
}
    • 0