Question

如何将bootstrap-datepicker限制为仅显示（不仅仅是禁用）将来某些月/年。传递endDate仅会使日期超出传递日期，但仍会显示选择器中禁用日期之后的几个月。我不希望在我通过的日期之后在datepicker中显示任何月份/年。

编辑：如果可以禁用下一个按钮（导航到下一年），如果下一年大于我通过的某一年，那么它也会起作用。

Answer 1

不幸的是，没有内置功能可以满足您的要求。

隐藏已停用日期的一种方法是添加针对已禁用元素的CSS规则。每个disabled元素都有disabled类。此外：

每个元素都有一个类型的类（天数为day类，月份为month类，年份为year类，数十年有decade班级和几个世纪有century班级）
所有元素均位于div下datepicker和datepicker-dropdown类

您可以使用以下内容：

td.disabled.day,
td>span.month.disabled,
td>span.year.disabled,
td>span.decade.disabled,
td>span.century.disabled {
  visibility: hidden;
}

或

div.datepicker.datepicker-dropdown .disabled {
  visibility: hidden;
}

这是一个完整的实例：

$('#datepicker').datepicker({
  endDate: new Date()
})

td.disabled.day,
td>span.month.disabled,
td>span.year.disabled,
td>span.decade.disabled,
td>span.century.disabled{
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control" id="datepicker">

防止bootstrap-datepicker显示未来几个月

1 个答案: