javascript - 想要仅在 daterangepicker 中禁用 'from' 日期字段中的 future 日期

Question

在给定的 fiddle 中here

有两个日期输入“从”和“到”

其中我只想禁用“从”中的 future 日期，但当我应用 endDate 代码时，它同时适用于“从”和“到”日期。

我想应用“endDate”，即我想仅在“从”字段中禁用 future 日期，而不是在“截止”日期字段中禁用 future 日期。

我从thiss中选择了这个日期选择器网站

<div class="input-daterange input-group" id="datepicker">
   <span class="input-group-addon">from</span>
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

$('.input-daterange').datepicker({
    autoclose: true,
    endDate: '+0d'
   });

如有任何疑问，请在下面评论

Answer 1

由于您正在使用日期范围功能并且无法单独初始化日期选择器，因此您可以利用内置的 setEndDate method设置endDate property特定 input 元素的。

$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');

在您的情况下，您将在两个 input 字段上初始化日期范围选择器(就像您已经在做的那样)，然后通过其属性定位特定的 input 元素，并使用 setEndDate 方法:

Updated Example

$('.input-daterange').datepicker({
  autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');

完整片段:

$('.input-daterange').datepicker({
  autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
  <span class="input-group-addon">from</span>
  <input type="text" class="input-sm form-control" name="start" />
  <span class="input-group-addon">to</span>
  <input type="text" class="input-sm form-control" name="end" />
</div>