方法1

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

方法2

只需使用月份的下拉菜单和带有设置限制的数字输入，文本<div>包含可读界面的日期。

Answer 2

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

这是一份工作样本：

＆＃13;

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)
});

＆＃13;

<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">

＆＃13;

如果您想使用enabledDates，可以使用接受启用日期数组的add。你可以在10年前循环到未来两年创建一系列启用日期。组件使用了momentjs，因此您可以使用subtract，startOf，isBefore和clone()来计算结果。请注意，时刻对象是可变的，因此您必须使用{{3}}。

这是一份工作样本：

＆＃13;

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()
});

＆＃13;

<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>

＆＃13;

需要限制Bootstrap日期选择器以仅允许每月的第1天

2 个答案:

方法1

方法2