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

Question

我正在使用 Bootstrap DatePicker。我想验证 From Date 和 To Date 。 Start Date correctly Pick todays date.I 遇到问题“To Date does not Pick the start date(ie. from date value)”。如何解决？

  $(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 中的开始日期和结束日期

Start Date and End Date in Bootstrap

validation

jquery

date

datepicker

twitter-bootstrap