wake-up-neo.com

JQuery ui - datepicker, bestimmte Datumsangaben deaktivieren

Ich versuche, bestimmte Daten mit der JQuery Ui zu deaktivieren. Ich habe jedoch kein Glück, hier ist mein 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>

Instanziieren Sie das Datepicker-Objekt

<script type="text/javascript">

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

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

    })

Lassen Sie sich die Daten innerhalb des Kalenders deaktivieren

    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>

Es scheint nicht zu funktionieren, keine Idee, wie ich das lösen kann. Prost.

14
bobo2000

Es sieht so aus, als würden Sie zweimal datepicker für eine Eingabe aufrufen. Es ist schwer, Ihrem Code zu folgen, aber wenn Sie ihn neu organisieren und den zweiten Aufruf datepicker entfernen, sollte alles funktionieren:

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

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

30
Andrew Whitaker

Hilfreiche Antwort .. Wenn Sie einen bestimmten Tag deaktivieren möchten, können Sie Folgendes tun:

          $scope.dateOptions = {
            beforeShowDay: unavailable
          };

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

die oben genannten Optionen aktivieren nur den Sonntag und alle anderen Tage werden deaktiviert. Hoffe das hilft.

0
Deva