Bootstrap 中的开始日期和结束日期答案

【问题标题】：Start Date and End Date in BootstrapBootstrap 中的开始日期和结束日期
【发布时间】：2015-04-07 12:17:33
【问题描述】：

我正在使用 Bootstrap DatePicker。我想验证 From Date 和 To Date 。开始日期正确选择今天的日期。我有一个问题“到日期没有选择开始日期（即从日期值）”。如何解决？

  $(document).ready(function() {
    $('#fromDate').datepicker({
        startDate: new Date(),
    });

    $('#toDate').datepicker({
        startDate: $('#fromDate').val(),
    });
 });

【问题讨论】：

你能告诉我们你的问题到底是什么吗？
To Date 不选择开始日期（即从日期值开始）

标签： jquery twitter-bootstrap validation date datepicker

【解决方案1】：

在你设置$('#toDate').datepicker()的时候，$('#fromDate')的值是空的。

您应该在开头设置默认的startDate 和endDate 变量，并将changeDate 事件监听器添加到您的日期选择器。

例如：

// set default dates
var start = new Date();
// set end date to max one year period:
var end = new Date(new Date().setYear(start.getFullYear()+1));

$('#fromDate').datepicker({
    startDate : start,
    endDate   : end
// update "toDate" defaults whenever "fromDate" changes
}).on('changeDate', function(){
    // set the "toDate" start to not be later than "fromDate" ends:
    $('#toDate').datepicker('setStartDate', new Date($(this).val()));
}); 

$('#toDate').datepicker({
    startDate : start,
    endDate   : end
// update "fromDate" defaults whenever "toDate" changes
}).on('changeDate', function(){
    // set the "fromDate" end to not be later than "toDate" starts:
    $('#fromDate').datepicker('setEndDate', new Date($(this).val()));
});

【讨论】：

使用默认格式但不使用自定义格式，任何人都可以提出解决方案
这里有一个问题，如果你删除盒子里的内容，旧的限制仍然存在。您还需要捕获文本框擦除场景。

【解决方案2】：

如果用户首先点击 fromDate，则为 toDate 设置结束日期，如果用户首先点击 toDate，我们必须为 fromDate 设置开始日期。

如果需要，我们还必须提供日期格式。

$(document).ready(function(){
   $("#fromDate").datepicker({
       format: 'dd-mm-yyyy',
       autoclose: true,
   }).on('changeDate', function (selected) {
       var minDate = new Date(selected.date.valueOf());
       $('#toDate').datepicker('setStartDate', minDate);
   });

   $("#toDate").datepicker({
       format: 'dd-mm-yyyy',
       autoclose: true,
   }).on('changeDate', function (selected) {
           var minDate = new Date(selected.date.valueOf());
           $('#fromDate').datepicker('setEndDate', minDate);
   });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<form autocomplete="off">
<input type="text" id="fromDate">
<input type="text" id="toDate">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

【讨论】：