Bootstrap 日期选择器从另一个日期选择器更改 minDate/startDate

Question

我的页面中有两个日期选择器，都是 bootstrap。条件只是开始日期永远不会比结束日期高。意味着结束日期属性（minDate）必须在日期选择器更改开始日期时更改，结束日期更改时必须更改，开始日期日期选择器的日历最小范围应根据结束日期值。

希望你能理解我的问题

$(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"/>

Answer 1

我做了一个jsfiddle做你想做的事。正如 pqdong 评论的那样，您在设置结束日期时调用了 datetimepicker 而不是 datepicker。

这是工作 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);
        });

});

Answer 2

我没有足够的声誉来评论 Razzildinho 的出色回答，但我确实想提供一个小的附加功能来帮助用户，即在第二个日期选择器上突出显示所选日期。您可以通过添加此行来执行此操作：

$('#enddate').datepicker('setDate', minDate);

所以在上下文中它看起来像这样：

$(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);
    });

});

Bootstrap 日期选择器从另一个日期选择器更改 minDate/startDate

Bootstrap datepicker change minDate/startDate from another datepicker

javascript

jquery

twitter-bootstrap

bootstrap-datepicker