Всем привет!
Делаю динамичную форму, с указанием диапазона дат. Для выбора дат использую
https://github.com/eternicode/bootstrap-datepicker
Динамичность формы заключается в том, что пользователь может добавлять строки.
Для каждой строки он должен указать диапазон дат.
Вроде всё работает, но есть одна Бага. Она заключается в том, что календарь не выходит с первого раза, только со второго :)
Не могу понять, где в коде ошибка. Браузер ошибок не показывает.
jsfiddle.net/vr7s5wqo
вот код формы:
<form action="" method="post">
<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>
<input type="submit" value="дальше" class="btn btn-primary btn-lg">
</form>
а вот код скрипта:
$(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();
})
// выводит календарь
.on('click', '.input-daterange', function () {
$(this).datepicker({
viewMode: 'years',
format: "dd.mm.yyyy",
startDate: new Date('01.01.1996'),
weekStart: 1,
language: "ru",
orientation: "top auto",
});
})
});
