bootstrap-datepicker fiddle

by Daniel Gasser

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
                   <div id="container">
                   
                   <div class="input-daterange input-group">
                        <input type="text" id="reservation_started_at" name="reservation_started_at" class="input-sm form-control"
                               placeholder="main from" readonly value=""/>
                        <span class="input-group-addon">to</span>
                        <input type="text" id="reservation_ended_at" name="reservation_ended_at" class="input-sm form-control"
                               placeholder="main to" readonly value=""/>
                    </div>
                              </div>
         <button title="add range" class="btn btn-danger " id="add_range">Add</button>

JavaScript

$(function($) {

	today = new Date(),
    tomorrow = new Date(),
    datePickerSettings = {
            format: "dd.mm.yyyy",
            weekStart: 1,
            todayBtn: "linked",
            clearBtn: true,
            language: 'de',
            calendarWeeks: true,
            autoclose: true,
            todayHighlight: true,
            startDate: today,
            endDate: tomorrow,
            immediateUpdates: true
        };
    tomorrow.setDate(today.getDate() + 7);
		$('.input-daterange').datepicker(datePickerSettings);
});
// Set end date to minimum nights.
$('#add_range').on('click', function() {
	var div = $('.input-daterange').first().clone(),
  counter = $('.input-daterange').length;
  $(div).attr('id', 'range_' + counter)
	$('#container').append(div);
  $(div).find('*').each(function () {
            if ($(this).attr('id') !== undefined) {
                splitted = $(this).attr('id').split('_');
                splitted.pop();
                $(this).attr('id', splitted.join('_') + '_' + counter);
            }
        });
        splitted = $(div).attr('id').split('_');
        splitted.pop();
        $(div)
            .attr('id', splitted.join('_') + '_' + counter);
        $(div).find('.input-daterange').attr('id', 'guestDates_' + counter);
console.log($('#reservation_started_at').val(), $('#reservation_ended_at').val())
	$('#range_' + counter).datepicker(datePickerSettings);
	//$('#range_' + counter).datepicker('startDate', $('#reservation_started_at').val());
	//$('#range_' + counter).datepicker('endDate', $('#reservation_ended_at').val());
  var test = $('.input-daterange').find('#reservation_started_1')
console.log($('#reservation_started_at').val(), $('#reservation_ended_at').val(), test)
test.datepicker('setEndDate', $('#reservation_ended_at').val());

});