Question

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

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

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

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

Answer 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>

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

2 个答案: