javascript - 随着时间的推移添加动态 HTML 字段

Question

我正在使用 Bootstrap 时间选择器 ( https://github.com/eternicode/bootstrap-datepicker ) 作为动态生成的时间选择器输入字段。我能够创建字段，但无法将时间选择器对象附加到它们。

以下是工作代码的一部分:Code on JSFIDDLE

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.eventStartDate input').datepicker({
    autoclose: true,
    todayHighlight: true,
    startDate: today
}).on('changeDate', function(e) {
    var t = e.date;
    $(".eventEndDate input").datepicker({
        autoclose: true,
        startDate: t
    });
});

Answer 1

这里正在工作 fiddle

HTML:

 <div class="row">
    <div class="multi-field-wrapper">
        <div class="multi-fields alldates">
            <div class="multi-field" id="multi-field1">
                <div class="form-group eventStartDate col-xs-3">
                    <label>Start Date</label>
                    <input type="text" class="form-control start-date-picker" placeholder="">
                    <span class="alert-message" data-alertid="startdate"></span>
                </div>

                <div class="form-group eventEndDate col-xs-3">
                    <label>End Date</label>
                    <input type="text" class="form-control end-date-picker" placeholder="">
                </div>
            </div>
        </div>
        <div class="form-group col-xs-2">
             <div class="form-group">
                 <label>Add more</label>
                 <span class="input-group-btn">
                     <button class="btn btn-default add-time-field" type="button">+</button>
                 </span>
                 <span class="input-group-btn">
                     <button class="btn btn-default remove-time-field" type="button">-</button>
                 </span>
            </div>
        </div>
    </div>
</div>

如您所见，我对其进行了轻微的重组(从多字段 div 中删除了添加/删除按钮)

JavaScript:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.start-date-picker').datepicker({
    autoclose: true,
    todayHighlight: true,
    startDate: today
}).on('changeDate', function(e) {
    var t = e.date;
    $(".end-date-picker").datepicker({
        autoclose: true,
        startDate: t
    });
});


 $(".add-time-field").click(function(e) {

        var $div = $('div[id^="multi-field"]:last');

        var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

        //Insure that id property is unique
        var $clone = $div.clone().prop('id', 'multi-field'+num );

        $('.alldates').append($clone);

         var $startDate = $clone.find('.start-date-picker').first();
         $startDate.val('');
         var $endDate = $clone.find('.end-date-picker').first();
         $endDate.val('');
         $startDate.datepicker({
                autoclose: true,
                todayHighlight: true,
                startDate: today
         }).on('changeDate', function(e) {
            var t = e.date;
            $clone.find('.end-date-picker').first().datepicker({
                autoclose: true,
                startDate: t
            }); 
        });        
 });

$('.remove-time-field').click(function() {
    if ($('.multi-fields .multi-field').length > 1) {       
        $('.multi-fields .multi-field:last-child').remove();
    }
});

每次添加新的多字段 div 时，都会将日期选择器添加到新添加的输入中。此外，在克隆元素时，您需要确保 ID 是唯一的