Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

jQuery UI Datepicker - Daten nicht anwählbar/verfügbar machen

#Tutorials#jQuery

Möchte man einen Datepicker benutzen kommt man ziemlich schnell auf den, der bei jQuery UI eingebaut. Der Datepicker ist schön, flexibel und funktioniert browserübergreifend. Ich brauchte ihn allerdings in Verbindung mit einem Buchungssystem. Der Datepicker bietet eine Funktion an, die aufgerufen wird, bevor die Tage angezeigt werden. Diese heißt "beforeShowDay". Ich habe hier eine kleine Funktion, die nun alle Daten ausblendet, die nicht verfügbar sind. Diese Daten müssen im JSON Format vorliegen.


var unavailableDates = ["09-05-2011","14-05-2011","15-05-2011"];

function unavailable(date) {
  dmy = ('0' + date.getDate()).slice(-2) + "-" + ('0' + (date.getMonth()+1)).slice(-2) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) < 0) {
    return [true,"","Buche Jetzt"];
  } else {
    return [false,"","Ausgebucht"];
  }
}

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

Die Funktion guckt, ob in dem gerade angezeigten Monat Daten liegen, die nicht verfügbar sind und gibt dann false zurück.


Kommentare

  • Oliver
    Ok, das habe ich soweit hinbekommen, danke!!!

    Jetzt habe ich aber noch eine Frage. Kann man auch ein Datumsbereich (z.B. Ferien) angeben oder dürfen es immer nur einzelne Tage sein?

    Gruß, Oliver
    Antworten
    • admin
      Hi Oliver, das geht auch, allerdings brauchst du vorher halt ein Array mit allen Daten. Willst du nun Ferien haben, kannst du dir ja eine For-Schleife bauen, die alle Tage von Anfang bis Ende in ein Array pushed. Könnte so aussehen (Ist nur gegoogelt und nicht getestet)
      [code]
      function getDates(startDate, stopDate) {
      var dateArray = new Array();
      var currentDate = startDate;
      while (currentDate
      Antworten
  • Oliver Labs
    Jetzt mal ganz dumm nachgefragt. Wo muss ich den Code denn einfügen?
    In die "jquery-ui-1.10.4.js"?? Wenn ja, an welche stelle?
    Sorry, aber ich kenne mich da nicht so gut aus!

    Gruß,
    Oliver
    Antworten
    • admin
      Hallo Oliver, du hast ja bestimmt eine eigene Js Datei oder direkt im Script Bereich der Seite das Script, dass den Datepicker startet, oder? Wenn ja, dann muss der Code genau an diese Stelle, also nachdem du jqueryui geladen hast. Die letzte Zeile initiert ja den Datepicker.

      Grüße
      Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.