javascript - 需要限制 Bootstrap 日期选择器仅允许每月的第一天

Question

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

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

Answer 1

如果您想使用bootstrap-datepicker ，您可以使用 startDate 将范围限制在 10 年前和 future 2 年内。和 endDate选项。您可以使用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 年前循环到 future 两年，创建启用日期的数组。该组件使用momentjs，因此您可以使用 add , subtract , startOf和 isBefore来计算你的结果。请注意，时刻对象是可变的，因此您必须使用 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>