Question

有没有办法可以在我的页面上动态添加datetimepicker？我能够添加表单元素，但是datepicker功能不起作用。

这是表单布局

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

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值的动态添加的datepicker

无论如何要实现这个目标吗？

建议和答案非常感谢。

谢谢！

Answer 1

这里：

+'<input placeholder="Due date" class="date-picker-manual datepicker" type="text" name="due-date[new][]" id="datepicker'+rnd+'">'
+'<img class="ui-datepicker-trigger" id="trigger'+rnd+'" src="images/calendar.gif" alt="..." title="...">'

您需要从输入控件中删除类hasDatepicker，并在追加后添加日期选择器初始化代码。

注意：

hasDatepicker是当你的目标元素是一个datepicker时添加的类，但是如果你将这个类添加到你的元素中，那么jQuery / jQueryUI会忽略这个元素以将其作为datepicker初始化，所以 { {1}}不应添加到元素。

Answer 2

由于@Jai已提及您需要删除hasDatepicker，因为尚未添加日期选择器。在追加后初始化datepicker。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
 $(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" 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();
	      });

       
}); 


</script>
<div class="add-another-container"></div>
<div class="modal-footer">
      <button type="button" class="btn btn-default add-another"><span class="glyphicon glyphicon-plus"></span> Add another</button>
    </div>

如何动态添加datetimepicker？

2 个答案:

注意：