需要限制 Bootstrap 日期选择器只允许每个月的第一天

Question

由于某些业务需求，我需要使用日期选择器，但允许的日期是过去 10 年到未来 2 年中每个月的第一天。

我知道我可以在日期选择器中设置日期范围，但我如何才能获得每个月的第一天？

Answer 1

如果您想使用bootstrap-datepicker，您可以使用startDate 和endDate 选项将您的范围限制在10 年前和2 年后。您可以使用beforeShowDay 选项仅启用startDate 和endDate 之间的每个月的第一天，您只需检查每个显示的日期，如果getDate() 等于1。

这是一个工作示例：

function addYears(num){
  var currYear = new Date().getFullYear();
  var currMonth = new Date().getMonth();
  return new Date(currYear+num, currMonth, 1);
}

$("#datepicker").datepicker({
  beforeShowDay: function(d){
    if( d.getDate() === 1 ){
      return true;
    }
    return false;
  },
  startDate: addYears(-10),
  endDate: addYears(2)
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control" id="datepicker">

如果你想使用eonasdan-datetimepicker，你可以使用enabledDates，它接受一个启用日期的数组。您可以从 10 年前循环到未来两年，创建启用日期数组。该组件使用momentjs，因此您可以使用add、subtract、startOf 和isBefore 来计算您的结果。注意 moment 对象是可变的，所以你必须使用clone()。

这是一个工作示例：

function getEnabledDays(){
  var arr = [];
  // Ten years ago
  var start = moment().startOf('month').subtract(10, 'years');
  // In two years
  var end = moment().startOf('month').add(2, 'years');
  while( start.isBefore(end) ){
    arr.push(start.clone());
    start.add(1, 'month');
  }
  return arr;
}

$('#datetimepicker1').datetimepicker({
  format: 'L',
  enabledDates: getEnabledDays()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class='input-group date' id="datetimepicker1">
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Answer 2

方法一

也许您最好的选择是使用 HTML5 month 输入类型 (<input type="month">)，它允许您选择月份和年份。将标准 Bootstrap form-control 类应用于输入。请注意，Firefox 或 IE11 不支持它。

方法二

只需使用下拉菜单和设置限制的数字输入，以及包含日期的文本<div>，即可获得可读界面。