Bootstrap and datepicker
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div data-container="set">
<div class="form_row" data-item="set">
<div class="input-daterange input-group" id="datepicker_range">
<span class="input-group-addon">с</span>
<input type="text" class="input-md form-control" data-action="calStart" name="start" />
<span class="input-group-addon">по</span>
<input type="text" class="input-md form-control" name="end" />
</div>
<div class="form-group">
<button type="button" data-action="remove" class="remove btn btn-default btn-warning">×</button>
</div>
</div>
<footer>
<button type="button" data-action="add" class="add btn btn-success">Добавить еще строку...</button>
</footer>
</div>
JavaScript
$(function () {
var $container = $('[data-container="set"]'),
$row = $container.find('[data-item="set"]').clone(true);
$(document)
// добавляет строку
.on('click', '[data-action="add"]', function () {
var $clone = $row.clone(true);
$container.append($clone);
})
// удаляет строку
.on('click', '[data-action="remove"]', function () {
var $parent = $(this).closest('[data-item="set"]');
$parent.remove();
});
$('.input-daterange').datepicker({
viewMode: 'years',
format: "dd.mm.yyyy",
startDate: new Date('01.01.1996'),
weekStart: 1,
language: "ru",
orientation: "top auto",
});
});