如何动态添加日期时间选择器

有没有办法在我的页面上动态添加日期时间选择器？我能够添加表单元素，但是日期选择器功能不起作用。

这是表单布局

截图 1：http://i614.photobucket.com/albums/tt226/civicclubphilippines/1_zpswf7pxjxz.png截图 2：http://s614.photobucket.com/user/civicclubphilippines/media/test/2_zpspzjdb7yb.png.html

网页代码

        <div class="modal-footer">
      <button type="button" class="btn btn-default add-another"><span class="glyphicon glyphicon-plus"></span> Add another</button>
    </div>

JS代码

    $(document).ready(function() {
      $(".add-another").click(function(){
        var assgnee = $('#assigneeInit').html();
        var rnd = Math.ceil(Math.random()*1000);
        $(".add-another-container").append('<div class="form-group"><hr>'
           +'           <div class="col-md-4"></div>'
           +'           <div class="col-md-6">'
           +'                 <input required="" class="form-control" placeholder="Task name" type="text" size="50" name="taskname[new][]" id="taskname" value="">'
           +'                 <div class="help-block with-errors"></div>'
           +'           </div>'
           +'            <div class="col-md-4"></div>'
           +'           <div class="col-md-6">'
           +'             <textarea required="" class="form-control" placeholder="Task description" name="task-description[new][]" id="task-description" rows="2"></textarea>'
           +'             <div class="help-block with-errors"></div>'
           +'           </div>'
           +'           <div class="col-md-4"></div>'
           +'           <div class="col-md-6" id="assigneeCol"><select required class="form-control" name="assignee[new][]" id="assigneeInit'+rnd+'">'+assgnee+'</select>'
           +'             <div class="help-block with-errors"></div>'
           +'           </div>'
           +'            <div class="col-md-4"></div>'
           +'           <div class="col-md-6">'
           +'             <input placeholder="Due date" class="date-picker-manual datepicker hasDatepicker" type="text" name="due-date[new][]" id="datepicker'+rnd+'"><img class="ui-datepicker-trigger" id="trigger'+rnd+'" src="images/calendar.gif" alt="..." title="...">'
           +'           </div>'
           +'         </div>');

          $(".datepicker").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true,
            onSelect: function(dateText, inst) {
            //dateText comes in as MM/DD/YY
            var datePieces = dateText.split('/');
            var month = datePieces[0];
            var day = datePieces[1];
            var year = datePieces[2];
            //define select option values for
            //corresponding element
            $('select#month').val(month);
            $('select#day').val(day);
            $('select#year').val(year);
            }
          });
      });

  });

我需要添加动态添加的日期选择器，其中包含来自变量 rnd 的串联 id 值

有没有办法做到这一点？

建议和回答。

谢谢！