beforeShowDay不工作

Question

我试图禁用所有日期，除了我在变量days中发送的那些日子，但它不起作用...

if (dias !=null && dias!="" && dias!='undefined'){  
        var days  = dias.split(',');    
        //$('#sandbox-container-'+num).datepicker('setDates', days);

        $('#sandbox-container-'+num).datepicker({


            beforeShowDay: function(d) {
                var dmy = (d.getMonth()+1)
                if(d.getMonth()<9) 
                    dmy="0"+dmy; 
                dmy+= "/"; 

                if(d.getDate()<10) dmy+="0"; 
                    dmy+=d.getDate() + "/" + d.getFullYear(); 

                console.log(dmy+' : '+($.inArray(dmy, days)));

                if ($.inArray(dmy, days) != -1) {
                    return [true, "","Available"]; 
                } else{
                     return [false,"","unAvailable"]; 
                }
            }

        }).datepicker('setDates', days).attr("readonly", "readonly");

    }   

Answer 1

在这种情况下，您可以使用beforeShowDay，然后每天检查您的阵列，看看是否有些选项是有效的。

正如你所看到的那样，我们检查一下我们进入函数的那一天并开始比较是否在数组上，然后返回true，那天将处于活动状态。

现在这有一个小问题，因为格式有所不同，因为我使用的是JavaScript日期，但使用moment.js [稍后会做] 很容易解决 p>

＆＃13;

＆＃13;

var enableDates = ['17/5/2018', '18/5/2018', '19/5/2018', '7/5/2018'];


$('#sandbox-container input').datepicker({
  format: "dd/mm/yyyy",
  autoclose: true,
  beforeShowDay: function(date) {
    var currentDate =
      date.getDate() + '/' +
      (date.getMonth() + 1) +
      '/' + date.getFullYear();
    return (enableDates.indexOf(currentDate) != -1)
  }
});

＆＃13;

<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.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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br/>
<div class="span5 col-md-5" id="sandbox-container">
  <input class="form-control" type="text">
</div>

＆＃13;

＆＃13;

＆＃13;