How can I add javascript-datetimepicker afterwards?

Question

I use jQuery Tabs http://jqueryui.com/tabs/

After customizing some options the user clicks on a button and the tab reload.

 function refresher() { 
        //empty the tab
        $("#tabs-individually").empty();

            //load new stuff
        //put the container for highcharts-chart in the tab
        $("#tabs-individually").append('<table><tr><td align="left"><form id="formrange">from<input type="text" size="20" id="startdate"/>to<input type="text" size="20" id="enddate" /><select id="range" ><option value="second">second</option><option value="minute" selected>minute</option><option value="hour" >hour</option><option value="day" >day</option></select><input id="button" type="button" value="confirm" onclick="redraw()" /></form></td></tr><tr><td><div id="container"></td></tr></div>');      

My problem is jQuery datetimepicker Addon. After reloading the tab, there are 2 input-fields, that should get a datetimepicker via javascript. Finally it should look like this:

How can I transform my javascript-code, so that it loads after the tab is empty?

    /*
    <script type="text/javascript"> 
     $("#startdate").datetimepicker({  showSecond: true, timeFormat: 'HH:mm:ss', });
     $("#enddate").datetimepicker({  showSecond: true,  timeFormat: 'HH:mm:ss', });
    </script>
    */

Answer 1

You need to re-initialize the datepicker widget on the input elements after the page is refreshed.

function refresher() { 
    //empty the tab
    $("#tabs-individually").empty();

    //load new stuff
    //put the container for highcharts-chart in the tab
    var el = $('<table><tr><td align="left"><form id="formrange">from<input type="text" size="20" id="startdate"/>to<input type="text" size="20" id="enddate" /><select id="range" ><option value="second">second</option><option value="minute" selected>minute</option><option value="hour" >hour</option><option value="day" >day</option></select><input id="button" type="button" value="confirm" onclick="redraw()" /></form></td></tr><tr><td><div id="container"></td></tr></div>').appendTo("#tabs-individually");
    $('#startdate, #enddate').datepicker({});
}