JQuery DatePicker et beforeShowDay

J'essaie désespérément d'utiliser cette fonction pour activer uniquement les jours dans mon datepicker, mais le beforeShowDay fonction n'est jamais déclenché 🙁

même cela ne fonctionne pas:

$(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');
}

Si vous avez des idées, je vous en serais très reconnaissante!

en fait, ce n'est pas de travail:

<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>

source d'informationauteur user1826124

datepicker jquery

Selon jQueryUI du Datepicker API,

JQuery DatePicker et beforeShowDay

C'est ce qui explique pourquoi

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

ne fonctionne pas.

Aussi, j'ai remarqué que vous appelez .datepicker() plusieurs fois et à chaque fois que vous êtes en lui donnant différents paramètres.

Au lieu de:

$("#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');

Essayez de faire cela:

$("#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"]; 
        }
    }
    });

J'ai également fourni avec une démo: http://jsfiddle.net/yTMwu/18/ . Espérons que cette aide!

La date étant passée dans la fonction de rappel est un acteur à part entière de la date et l'heure. Donc, si vous voulez qu'il soit comparé à une date courte chaîne, l'un d'eux doit être converti. Cet extrait de juste le beforeShowDay attribut partie de la datepicker démontre qu'une conversion est nécessaire. Ici j'ai simplement désactiver une seule date sur le calendrier pour prouver le point.

                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, "" ];
                }
            }

Dom a donné de bons expliquer. Et je tiens à ajouter plus de raccourcir le code:

Si vous avez le tableau de availableDates en format: 0000-00-00 (aaaa-mm-jj)

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 - marche à chaque fois, avant de rendre la journée))

$.inArray - trouver de la valeur dans le tableau (-1 si aucune valeur n')

Dans cette solution, vous pouvez faire stopDatesil suffit de changer la ligne:

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

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

Vous devez vous connecter pour publier un commentaire.