如何在输入 Bootstrap Datepicker 中显示年份范围？

Posted 2023-05-08

【中文标题】如何在输入 Bootstrap Datepicker 中显示年份范围？

【英文标题】：How display years range in input Bootstrap Datepicker?

【发布时间】：2021-08-21 05:31:16

【问题描述】：

我正在使用以下代码来显示年份范围：

 $('.date-own').datepicker(
    format: " yyyy",
    viewMode: "years",
    minViewMode: "years",
    autoclose: true,
    startView: 2,
    yearRange: '1950:2011'
);

但是范围没有到来。

我只需要从 1950 年到 2010 年的年份，我该如何解决这个问题？

【参考方案1】：

在您的日期选择器中，您可以使用 startDate 和 endDate 并在那里您可以指定从现在开始的多少年，即：1950-2021 = -71y 设置 startDate 并为其他设置相同。

演示代码：

$('.date-own').datepicker(
  format: "yyyy",
  viewMode: "years",
  updateViewDate: true,
  minViewMode: "years",
  autoclose: true,
  startView: 2,
  defaultViewDate: 
    year: '1950'
  ,
  startDate: '-71y', //2021 -1950
  endDate: '-10y' //2021-2011
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<input type="text" class="date-own">

【讨论】：

我还需要一个帮助，我们是否默认激活 1950 年并且只在日历中显示开始日期和结束日期

看，我有更新。但是，由于年份已经被禁用，因此不确定第二个问题。

谢谢，我找到了使用 CSS 解决第二个问题的方法。 .datepicker 表 tr td span.disabled，.datepicker 表 tr td span.disabled:hover display:none;