选择startDate后约束endDate
Constraint endDate after select startDate
我需要帮助来添加endDate (date_end)
将始终在startDate (date_start)
之后的约束。
因此,如果我为date_start
选择了2016-10-31
,那么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>
js:
$(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
});
}
});
可以使用setter方法将onchange
的事件处理程序添加到startDate和endDate选择器中。
添加/修改:
-
修改日期组div,使其具有id属性:
<div class="input-group date" id="start_date_group">
2。为每个日期选择器注册changeDate回调函数-例如:
$("#start_date_group").on("changeDate", function(e) { $('#end_date_group').datepicker('setStartDate',e.date); }); $("#end_date_group").on("changeDate", function(e) { $('#start_date_group').datepicker('setEndDate',e.date); });
- 还有一个
</div>
标签在你的html中是不合适的-我将它从endDate组之后移动到表单的结束标签之后。
- 还有一个
$(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
});
//when the Start date changes, set the startDate on the End Date field
$("#start_date_group").on("changeDate", function(e) {
$('#end_date_group').datepicker('setStartDate',e.date);
});
//when the End date changes, set the endDate on the Start Date field
$("#end_date_group").on("changeDate", function(e) {
$('#start_date_group').datepicker('setEndDate',e.date);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<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">
<!-- add id attribute to the group here -->
<div class="input-group date" id="start_date_group">
<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">
<!-- add id attribute to the group here -->
<div class="input-group date" id="end_date_group">
<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> move this closing tag down after the closing form tag -->
<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>
</div> <!-- <-- move this closing div tag down here instead of after the endDategroup <div>-->
</section>
相关文章:
- AngularJS指令范围约束问题重复出现
- 在Matter.js中隐藏绿色约束拖动轨迹
- 如何使用RaphaelJS将文本元素约束在正方形中
- 使用选择约束限制全日历中的可选框
- 是否可以有条件地添加角度自定义验证约束
- Dijit maxLength通过dojo约束语言
- 与 PostgreSQL 续集中的外键约束的丰富自关联
- jQuery可拖动约束到父对象'的父级
- 对文本框强制执行大小写约束
- 剔除部分约束问题
- 需要正则表达式的字符串约束数字与 javascript 中的起始字母 p
- WebRTC 火狐约束
- 为什么此 URL 不受同源策略约束
- 对续集列的唯一约束
- INSERT 语句与 FOREIGN KEY 约束冲突.数据库中发生冲突
- 如果约束失败,请暂停执行
- 可拖动约束
- 唯一字段约束在 dropDatabase 之后未强制执行
- 在拉斐尔.js和缩放中拖动约束
- 选择startDate后约束endDate