在 bootstrap datepicker 中启用并仅显示特定日期和今天日期

问题描述

我在我的网站中使用了 bootstrap datepicker。我有一组我想要启用的日期加上今天的日期，并从日期选择器中隐藏所有其他年、月和日。我该怎么做？

我还有开始日期和结束日期。如果开始日期更改，我想在 end_date 输入中设置开始日期。如果结束日期更改，我想在 start_date 输入中设置结束日期。

<input type="text" name="start_date" class="form-control" id="start_date" placeholder="Enter date" readonly>
<input type="text" name="end_date" class="form-control" id="end_date" placeholder="Enter date" readonly>



var enabled_days = ['2021-06-03','2021-06-04','2021-06-05'];
$("#start_date").datepicker({
                format: 'yyyy-mm-dd',todayHighlight: true,todayBtn: 'linked',clearBtn: true,autoclose: true,// endDate: '0d',beforeShowDay: function(date) {
                    if (enabled_days.indexOf(formatDate(date)) < 0)
                        return {
                            enabled: false
                        }
                    else
                        return {
                            enabled: true
                        }
                },}).on('changeDate',function(selected) {
                var minDate = new Date(selected.date.valueOf());
                $('#end_date').datepicker('setStartDate',minDate);
            });

function formatDate(d) {
            var day = String(d.getDate())
            if (day.length == 1)
                day = '0' + day
            var month = String((d.getMonth() + 1))
           
            if (month.length == 1)
                month = '0' + month
            return d.getFullYear() + "-" + month + "-" + day
           
        }

解决方法

您可以使用 moment.js 这将帮助我们根据给定的要求格式化日期。因此，为 datepicker 编写 on("show",function..) 这将在显示您的 datepicker 时被调用。然后，在该事件中调用一些函数来从 datepicker 禁用您的 month/year。

演示代码：

var enabled_days = ['2021-06-03','2021-06-04','2021-06-05'];
var options = {
  format: 'yyyy-mm-dd',todayHighlight: true,todayBtn: 'linked',clearBtn: true,autoclose: true,// endDate: '0d',beforeShowDay: function(date) {
    if (enabled_days.indexOf(formatDate(date)) < 0)
      return {
        enabled: false
      }
    else
      return {
        enabled: true
      }
  }
}
$("#start_date").datepicker(options).on('changeDate',function(selected) {
  var minDate = new Date(selected.date.valueOf());
  $('#end_date').datepicker('setStartDate',minDate);
}).on("show",function(event) {
  do_disabled(); //call this..

});
$("#end_date").datepicker(options).on('changeDate',function(selected) {
  var minDate = new Date(selected.date.valueOf());
  $('#start_date').datepicker('setEndDate',function(event) {
  do_disabled(); //call this..

});

function formatDate(d) {
  var day = String(d.getDate())
  if (day.length == 1)
    day = '0' + day
  var month = String((d.getMonth() + 1))

  if (month.length == 1)
    month = '0' + month
  return d.getFullYear() + "-" + month + "-" + day

}

function do_disabled() {
  //add disable to month..span tag 
  $(".month").addClass("disabled")
  //loop through month elemnet
  $(".month").each(function(index,element) {
    var el = $(this);
    //loop through array
    $(enabled_days).each(function(i) {
      var dates = new Date(enabled_days[i])
      //check if month jan,feb === our arrya month...
      if (el.text().trim() === moment(dates).format("MMM")) {
        el.removeClass("disabled") //remove disabled from there month..
      }
    })
  })
  //same for year
  $(".year").each(function(index,element) {
    var el = $(this);
    $(enabled_days).each(function(i) {
      var dates = new Date(enabled_days[i])
      if (el.text() != moment(dates).format("YYYY")) {
        el.addClass("disabled")
      }
    })

  })

}

.datepicker-years .datepicker-switch,.prev,.next {
  pointer-events: none;
}

<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/moment.js/2.20.1/moment.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" name="start_date" class="form-control" id="start_date" placeholder="Enter date" readonly>
<input type="text" name="end_date" class="form-control" id="end_date" placeholder="Enter date" readonly>