Bootstrap datepicker从另一个datepicker更改minDate / startDate [英] Bootstrap datepicker change minDate/startDate from another datepicker

问题描述

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

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.

我希望你理解我的问题

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

推荐答案

我有做了你需要的 jsfiddle 。正如pqdong所说，你在设置结束日期时调用datetimepicker而不是datepicker。

I have made a jsfiddle doing what you want. As pqdong commented you were calling datetimepicker instead of datepicker when setting end date.

这是工作的javascript：

Here is the working 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);
        });

});

这篇关于Bootstrap datepicker从另一个datepicker更改minDate / startDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！