Мне нужна помощь, чтобы добавить ограничение, которое endDate (date_end)
всегда будет после startDate (date_start)
.Constraint endDate после выбора startDate
Так что, если я выбрал 2016-10-31
для date_start
, то даты до 2016-10-31
будут отключены в end_date
ввода.
Вот мой код:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<form class="form-horizontal mt-20" method="post" action="action/input">
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;">
<option disabled selected>Select name</option>
<option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option>
<option value='4' data-date_start="2016-10-09" data-date_end="2016-10-29">Boby</option>
<option value='5' data-date_start="2016-10-01" data-date_end="2016-10-31">Ciara</option>
<option value='6' data-date_start="2016-10-05" data-date_end="2016-10-22">Don</option>
<option value='7' data-date_start="2016-10-01" data-date_end="2016-10-17">Ester</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Start Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="start_date" name="start_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">End Date</label>
<div class="col-sm-5">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="end_date" name="end_date" type="text" class="form-control pull-right">
</div>
</div>
</div>
</div>
<div class="box-footer col-md-offset-3">
<button type="submit" class="btn btn-success mr-10">Save</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button>
</div>
</form>
</div>
</section>
ЯШИ:
$(document).ready(function() {
var start = null;
var end = null;
$('#date').change(function() {
start = $(this).find(":selected").data("date_start");
end = $(this).find(":selected").data("date_end");
$('.input-group.date').datepicker("remove"); //clearing the previos options and again initiating datepicker
initDatePicker();
});
function initDatePicker() {
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
startDate: new Date(start),
endDate: new Date(end),
autoclose: false
});
}
});
Я запустить свой код, но он не работает – brobrobrobrobro
@brobrobrobrobro К сожалению, я пытался использовать последнюю версию начальной загрузки пользовательского интерфейса, но я обновил свой ответ используйте ту же самую версию загрузочного бутстрапа, который вы используете. –