如何设置bootstrap datepicker中的早退日期的beforeShowDay?

时间:2018-11-19 12:39:01

标签: datepicker bootstrap-datepicker

嗨,我正在尝试使用带长日期后退选择的datepicker引导程序。现在我只能得到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天。因此不包括数组的日期。 对这个问题有什么建议吗? 谢谢您的帮助

2 个答案:

答案 0 :(得分:0)

请尝试...使用'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">

答案 1 :(得分:0)

再举一个例子,("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">