web-dev-qa-db-fra.com

JQuery ui - datepicker, désactiver des dates spécifiques

J'essaie de désactiver des dates spécifiques à l'aide de l'interface utilisateur de JQuery. Cependant, je n'ai pas de chance, voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

Instancier l'objet Datepicker

<script type="text/javascript">

    $(function() {
    $( "#iDate" ).datepicker({

    dateFormat: 'dd MM yy',
    beforeShowDay: checkAvailability
    });

    })

Obtenir les dates à désactiver dans le calendrier

    var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"];

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
  } else {
    return [false,"","Unavailable"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

</script>
</head>
<body>
<input id="iDate">
</body>
</html>

Cela ne semble pas fonctionner, aucune idée de comment je peux résoudre ce problème. à votre santé.

jqueryhtmljquery-uijquery-ui-datepicker
14
bobo2000

On dirait que vous appelez datepicker deux fois sur une entrée. Il est difficile de suivre votre code, mais si vous le réorganisez et supprimez le deuxième appel datepicker, tout devrait fonctionner:

<script type="text/javascript">
    var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];

    function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }

    $(function() {
        $("#iDate").datepicker({
            dateFormat: 'dd MM yy',
            beforeShowDay: unavailable
        });

    });
</script>

Exemple: http://jsfiddle.net/daCrosby/JjPrU/334/

30
Andrew Whitaker

Réponse utile..Si vous souhaitez désactiver un jour particulier, vous pouvez procéder comme suit:

          $scope.dateOptions = {
            beforeShowDay: unavailable
          };

          function unavailable(date) {
                if (date.getDay() === 0) {
                    return [true, ""];
                } else {
                    return [false, "", "Unavailable"];
                }
          }

ce qui précède ne permet que le dimanche et tous les autres jours sont désactivés. J'espère que cela t'aides.

0
Deva