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

Question

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

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

Answer 1

方法一

也许您最好的选择是使用 HTML5 month 输入类型 (<input type="month">)，这样您可以 select 一个月和一年。将标准 Bootstrap form-control class 应用于输入。请注意，它在 Firefox 或 IE11 中不受支持。

方法二

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

Answer 2

如果要用bootstrap-datepicker, you can limit you range between 10 year ago and 2 years in the future using startDate and endDate options. You can use beforeShowDay option to enable only the first day of each month between startDate and endDate, you simply have to check, for each displayed date, if the 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, you can use enabledDates that accepts an array of enabled date. You can loop from 10 years ago till two year in the future creating the array of enabled dates. The componet uses momentjs, so you can use add, subtract, startOf and isBefore to calculate your result. Note that moment object are mutable, so you have to use 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>

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

Need to restrict Bootstrap date picker to allow 1st day of each month only

javascript

twitter-bootstrap

bootstrap-datepicker

方法一

方法二