如何在引导日期选择器中为长回日期设置 beforeShowDay？答案

【问题标题】：How to set beforeShowDay for long back dates in bootstrap datepicker?如何在引导日期选择器中为长回日期设置 beforeShowDay？
【发布时间】：2018-11-19 12:39:00
【问题描述】：

您好，我正在尝试使用带有长日期向后选择的日期选择器引导程序。现在我只能回到 45 天。

$( "#from" ).datepicker({
    multidate: true,
    beforeShowDay: function (date) {
        var tgl = ['15/08/2018', '16/08/2018', '17/08/2018']; 
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();              
        if (tgl.indexOf(dt_ddmmyyyy) != -1) {               
            return true;
        } else {
                return false;
        }
    }   
});

该代码将禁用除数组中指定的日期之外的所有日期，但最多只能返回 45 天。所以不包括数组的日期。对这个问题有什么建议吗？谢谢你的帮助

【问题讨论】：

试试我的答案

标签： datepicker bootstrap-datepicker

【解决方案1】：

试试这个...使用'15/08/2018' 到'15/8/2018'

$( "#js-date" ).datepicker({
    multidate: true,
    beforeShowDay: function (date) {
        var tgl = ['15/8/2018', '16/8/2018', '17/8/2018']; 
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();              
        if (tgl.indexOf(dt_ddmmyyyy) != -1) {               
            return true;
        } else {
                return false;
        }
    }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control" id="js-date">

【讨论】：

【解决方案2】：

再举一个例子，("0" + (date.getMonth() + 1)).slice(-2) 将获得 2 位数格式的月份。

$('#datepicker').val("08-15-2018");/* for demo purpose */

$('#datepicker').datepicker({
  multidate: true,
  beforeShowDay: function(date) {
    var tgl = ['15/08/2018', '16/08/2018', '17/08/2018'];
    var dt_ddmmyyyy = date.getDate() + '/' + ("0" + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
    if (tgl.indexOf(dt_ddmmyyyy) != -1) {
      return true;
    } else {
      return false;
    }
  }
});

td.day.disabled {
  opacity: 0.2;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<input id="datepicker">

【讨论】：