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

Posted 2023-05-07

【中文标题】引导日期选择器从另一个日期选择器更改 minDate/startDate

【英文标题】：Bootstrap datepicker change minDate/startDate from another datepicker

【发布时间】：2015-08-07 23:49:45

【问题描述】：

我的页面中有两个日期选择器，它们都是引导程序。条件只是开始日期相对于结束日期从不高。表示结束日期属性（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"/>

【问题讨论】：

请考虑重新表述你的问题/举出例子，你会得到更多答案:)

你在$('#enddate').datetimepicker('setStartDate', minDate);行中调用了错误的方法datetimepicker

好的，那么正确的方法是什么？

【参考方案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);
        );

);

【讨论】：

不错的解决方案！如果我想将 setStartDate 设置为 selected.date 值加上 5 天怎么办？谢谢，

@sidpat 您可以通过几种方式将值增加 5 天。以下可能是最简单的：var minDate = new Date(selected.date.valueOf() + (1000 * 60 * 60 * 24 * 5));

你救了我……非常感谢

@Razzildinho 如何在引导日期选择器中设置 minDate？？

@Gulshan 上面的代码不适合你吗？ $('#enddate').datepicker('setStartDate', minDate); 这行应该为你的日期选择器设置最短日期。

【参考方案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);
    );

);

【讨论】：

好一个。我在我的应用程序上使用了这个。完美运行。