Javascript Bootstrap 日期选择器从另一个日期选择器更改 minDate/startDate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30456270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker change minDate/startDate from another datepicker
提问by vikujangid
There are two datepickers in my page and both are of bootstrap. The condition is only that Start date never High with respect to End Date. Means End date Attribute (minDate) must be changed when Start Date changed by datepicker and same when End Date Changed, the minrange of calendar of Start Date datepicker should be according to End Date Value.
我的页面中有两个日期选择器，并且都是引导程序。条件只是开始日期相对于结束日期从不高。意味着结束日期属性（minDate）必须在日期选择器更改开始日期时更改，并且在结束日期更改时相同，开始日期日期选择器的日历的最小范围应根据结束日期值。
I hope you understand my problem
我希望你明白我的问题
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datetimepicker('setStartDate', minDate);
});
$("#enddate").datepicker();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<input type="text" placehoder="Start Date" id="startdate"/>
<input type="text" placehoder="End Date" id="enddate"/>回答by Razzildinho
I have made a jsfiddledoing what you want. As pqdong commented you were calling datetimepicker instead of datepicker when setting end date.
我做了一个jsfiddle做你想做的事。正如 pqdong 评论的那样，您在设置结束日期时调用的是 datetimepicker 而不是 datepicker。
Here is the working javascript:
这是工作的javascript：
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
});
$("#enddate").datepicker()
.on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#startdate').datepicker('setEndDate', maxDate);
});
});
回答by Sharky Laguana
I don't have enough reputation tocomment on Razzildinho's excellent answer, but did want to offer one small addition that will help users, which is to highlight the selected day on the second datepicker. You can do this by adding this line:
我没有足够的声誉来评论 Razzildinho 的出色答案，但确实想提供一个有助于用户的小补充，即在第二个日期选择器上突出显示所选日期。您可以通过添加以下行来执行此操作：
$('#enddate').datepicker('setDate', minDate);
So in context it will look like this:
所以在上下文中它看起来像这样：
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
$('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});
$("#enddate").datepicker()
.on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#startdate').datepicker('setEndDate', maxDate);
});
});
