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

Posted 2023-05-07

【中文标题】Bootstrap 中的开始日期和结束日期

【英文标题】：Start Date and End Date in Bootstrap

【发布时间】：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 不选择开始日期（即从日期值开始）

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