Question

我正在拼命尝试使用此功能仅在我的日期选择器中启用特定日期，但beforeShowDay函数从未被触发：（

即使这不起作用：

$(document).ready(function(){
/*initialisation des composants*/
initComponent();
});


availableDates = new Array();

/* Fonction d'initialisation des composants */
function initComponent(){

/* Date retrait */
$("#dateRetrait").datepicker();

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

//$("#dateRetrait").datepicker({buttonImage: "../../../Images/boutons/btn_calendier.png"});
//$("#dateRetrait").datepicker({showButtonPanel: true });
//$("#dateRetrait").datepicker({beforeShow: function() {setTimeout(function() {$(".ui-datepicker").css("z-index", 9999999999);}, 10);}});

$('#comboLieux').attr('disabled', 'disabled');
$('#comboCreneau').attr('disabled', 'disabled');
$('#dateRetrait').attr('disabled', 'disabled');
$('#dateRetrait').datepicker('option', 'minDate', new Date());

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');
}

如果您有任何想法，我将不胜感激！

事实上，即使这样也行不通：

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
$( "#datepicker" ).datepicker({beforeShowDay: function(d) {
        console.log(d);
        alert(d);
    }});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

Answer 1

根据jQueryUI's Datepicker API，

enter image description here

这解释了为什么

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

不起作用。

此外，我注意到您多次调用.datepicker()并且每次给它不同的参数。

而不是：

$("#dateRetrait").datepicker();

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

$('#dateRetrait').datepicker('option', 'minDate', new Date());

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');

尝试这样做：

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    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, availableDates)));

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

我还为您提供了演示：http://jsfiddle.net/yTMwu/18/。希望这有帮助！

Answer 2

传递给回调函数的日期是一个成熟的日期和时间。因此，如果您希望将其与短日期字符串进行比较，则必须转换其中一个字符串。这个仅仅是datepicker的beforeShowDay属性部分的片段表明转换是必要的。在这里，我只是禁用日历上的单个日期来证明这一点。

                beforeShowDay: function(date) {
                var dd = date.getDate();
                var mm = date.getMonth()+1; //January is 0!
                var yyyy = date.getFullYear();
                var shortDate = mm+'/'+dd+'/'+yyyy;
                var test = "12/30/2014";
                if (shortDate == test) {
                    return [false, "" ];
                } else {
                    return [true, "" ];
                }
            }

Answer 3

Dom很好地解释了。我想添加更多缩短的代码：

如果你有格式的成员 availableDates ：0000-00-00（yyyy-mm-dd）

var availableDates = ["2020-01-05", "2020-01-10", "2020-01-14"];

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    beforeShowDay: function(d) {        
        var year = d.getFullYear(),
            month = ("0" + (d.getMonth() + 1)).slice(-2),
            day = ("0" + (d.getDate())).slice(-2);

        var formatted = year + '-' + month + '-' + day;

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

beforeShowDay - 每次都在渲染日之前工作））

$。inArray - 在数组中查找值（如果没有值，则返回-1）

在此解决方案中，您可以进行 stopDates ，只需更改行：

if ($.inArray(formatted, availableDates) != -1) {

到

if ($.inArray(formatted, availableDates) == -1) {

JQuery DatePicker和beforeShowDay

3 个答案: