Jquery UI datepicker. Désactiver le tableau de dates

Question

J'ai essayé de trouver une solution à mon problème de datepicker Jquery ui et je n'ai pas eu de chance. Voici ce que j'essaie de faire...

J'ai une application où je fais un peu de PHP complexe pour renvoyer un tableau JSON de dates que je veux bloquer dans le Datepicker de Jquery UI. Je renvoie ce tableau :

["2013-03-14","2013-03-15","2013-03-16"]

N'y a-t-il pas un moyen simple de dire simplement : bloquer ces dates dans le sélecteur de date ?

J'ai lu la documentation de l'interface utilisateur et je ne vois rien qui puisse m'aider. Quelqu'un a-t-il une idée ?

Answer 1

Pour le JJ-MM-AA, utilisez ce code :

var array = ["03-03-2017", "03-10-2017", "03-25-2017"]

$('#datepicker').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [ array.indexOf(string) == -1 ]
    }
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}

Answer 2

Si vous voulez désactiver une ou plusieurs dates particulières dans le jquery datepicker, voici une démo simple pour vous.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>