Jquery datepicker根据第一个日期字段中选定的日期限制第二个日期字段中的日期，反之亦然（根据第二个日期字段中选定的日期限制第一个日期字段中的日期）
我有2个文本框FromDate和Todate它取决于用户将首先选择哪个字段，他有2个选项FromDate和Todate。
如果用户1选择fromdate ex（2017年6月15日），则在“Todate”字段中，将阻止在“fromdate”中选择的所有以前的日期，并且“Todate”字段仅可用于选择未来的日期
如果用户1选择了Todate ex（2017年6月15日），则在Fromdate字段中，所有未来的日期都将被阻止，并且Fromdate字段仅可用于选择过去的日期
另一个例子是，如果fromdate被选择为（2017年6月15日），则todate将无法选择2017年6月15日之前的日期，todate将只能选择2017年6月15日之前的日期。
如果Todate被选择为（2017年6月15日），则fromdate将无法选择大于2017年6月15日的日期，fromdate将只能用于选择小于2017年6月15日的日期。
下面是我的代码
<div class="input-group date" id="datetimepicker1">
@Html.TextBoxFor(model => model.FromDate, "{0:d}", new { tabindex = "2", @class = "form-control" })
<span class="input-group-addon" style="cursor: pointer;">
<span class="fa fa-calendar"></span>
</span>
</div>
<div class="input-group date" id="datetimepicker2">
@Html.TextBoxFor(model => model.ToDate, "{0:d}", new { tabindex = "3", @class = "form-control" })
<span class="input-group-addon" style="cursor: pointer;">
<span class="fa fa-calendar"></span>
</span>
</div>
<script>
$(document).ready(function () {
var date_input = $('#datetimepicker1'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
$(document).ready(function () {
var date_input = $('#datetimepicker2'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
</script>
下面的代码适用于您：
$("#FromDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-30:+1',
onSelect: function (dateText) {
//self.validateDate();
},
onClose: function (selectedDate, instance) {
if (selectedDate !== '') {
var orginalDate = new Date(selectedDate);
var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
$("#ToDate").datepicker("option", "minDate", selectedDate);
$("#ToDate").datepicker("option", "maxDate", date);
}
}
});
$("#ToDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-30:+1',
onSelect: function (dateText) {
//self.validateDate();
},
onClose: function (selectedDate) {
var orginalDate = new Date(selectedDate);
var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() -3 ));
$("#FromDate").datepicker("option", "minDate", date);
$("#FromDate").datepicker("option", "maxDate", selectedDate);
}
});
我在我的datepicker jquery中找到了解决问题的方法，下面是我使用的代码，它工作得很好
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script>
$(document).ready(function () {
$('#from').datepicker(
{
beforeShow: function () {
$(this).datepicker('option', 'maxDate', $('#to').val());
}
});
$('#to').datepicker(
{
defaultDate: "+1w",
beforeShow: function () {
$(this).datepicker('option', 'minDate', $('#from').val());
if ($('#from').val() === '') $(this).datepicker('option');
}
});
})
null
<div>
<label for="from">From</label> <input type="text" id="from" name="from" class="form-control datepicker" /> <label for="to">to</label> <input type="text" id="to" class="form-control datepicker" name="to" />
</div>
