Adding dynamic HTML fields as time

Question

I'm using Bootstrap timepicker (https://github.com/eternicode/bootstrap-datepicker) for timepicker input fields that will be dynamically generated. I'm able to create the fields, though unable to attach the timepicker object to them.

Below is a part of the working code: 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

Here is working 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>

As you can see I slightly restructured it (removed add/remove buttons from the multi-field 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();
    }
});

Each time that you add a new multi-field div add date pickers to the newly added inputs. Also when cloning elements you need to make sure that IDs are unique