如何将 bootstrap datetimepicker 作为动态数组

Question

如何把bootstrapdatetimepicker做成动态数组？

代码如下：

包含datetimepicker动态放置的bootstrap表格组：

<div class="form-group fieldGroup">
  <div class="input-group">
<div class="form-row">
<div class="col-sm bg-devider5">  
    <div class="input-group col">
      <input name="task_date[]" id="task_date[]" type="text" class="form-control" placeholder="Implementation Date" readonly>
        <div class="input-group-addon btn" id="task_date_calendar_clear"><span class="glyphicon glyphicon-remove"></span></div>
        <div class="input-group-addon btn" id="task_date_calendar_view" ><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
        <span class="help-block" id="error"></span>                    
</div>
    <div class="col-sm-6 bg-devider5">
      <div class="custom-high" >
      <textarea name="notes[]" placeholder="Notes" style="min-width: 100%"></textarea>
      </div>
    </div>      
    <div class="col-sm-auto bg-devider5" >
    <div class="custom-high">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
        </div>
    </div>
</div>
</div>
</div>

下面是 addmore 和 remove 按钮点击事件时的复制内容：

<div class="form-group fieldGroupCopy" style="display: none;">
  <div class="input-group">
<div class="form-row">
<div class="col-sm bg-devider5">
<div style="height:20px;">&nbsp;</div>
    <div class="input-group col">
      <input name="task_date[]" id="task_date[]" type="text" class="form-control" placeholder="Implementation Date" readonly>
        <div class="input-group-addon btn" id="task_date_calendar_clear"><span class="glyphicon glyphicon-remove"></span></div>
        <div class="input-group-addon btn" id="task_date_calendar_view" ><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
        <span class="help-block" id="error"></span>                    
</div>
    <div class="col-sm-6 bg-devider5">
      <div class="custom-high" >
      <textarea name="notes[]" placeholder="Notes" style="min-width: 100%"></textarea>
      </div>
    </div>      
    <div class="col-sm-auto bg-devider5" >
    <div class="custom-high">
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>
</div>
</div>

bootstrap datetimepicker 作为文本框的动态数组使用 jQuery 不工作:

$(document).ready(function(){
var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes();
    var dateTime = date+' '+time;

 $('#task_date').datetimepicker({
        language:  'ms',
        format: 'dd/mm/yyyy',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        minDate: 1,
        startDate: date,
        forceParse: 0
     });

//清除日历和查看新动态数组日历的按钮也不起作用

    $("#task_date_calendar_clear").click(function(){
        $("#task_date").val('');
    });

    $("#task_date_calendar_view").click(function(){
        $('#task_date ').data("datetimepicker").show();
    });


    var maxGroup = 10;          
        //add more fields group dynamically
        $(".addMore").click(function(){

                if($('body').find('.fieldGroup').length < maxGroup){
                        var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';

                        $('body').find('.fieldGroup:last').after(fieldHTML);
                    }else{
                        alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });

        //remove fields group
        $("body").on("click",".remove",function(){ 
            $(this).parents(".fieldGroup").remove();
        });
      });

Answer 1

bootstrap datetimepicker as dynamically array at textbox using jQuery not working:

我将 class .datetimepicker 添加到

    input name="task_date[]" id="task_date[]" type="text" class="form-control datetimepicker" placeholder="Implementation Date" readonly

我正在将 $('#task_date').datetimepicker({ 更改为

    $('body').on('focus', ".datetimepicker", function() {
    $(this).datetimepicker({ ... }); });

在保存到数据库之前通过 php / ajax 验证 post 数组。

如何将 bootstrap datetimepicker 作为动态数组

How to put bootstrap datetimepicker as dynamic array

javascript

php

jquery

arrays

bootstrap-datetimepicker