Home > JavaScript > Datepicker: Datum (Date) Felder vergleichen

Datepicker: Datum (Date) Felder vergleichen

21. Februar 2012 Einen Kommentar schreiben Kommentare

In meinem vorherigen Post habe ich über das Datepicker Plugin berichtet und wie man die englischen Beschriftungen (Tage, Monate) in die deutsche Sprache übersetzt. In diesem kleinen Tutorial Artikel möchte ich kurz zeigen, wie man Datepicker Felder, die ein Datum haben, miteinander vergleichen kann.

Klären wir erst einmal die Frage wo solch ein Code Schnippsel überhaupt Anwendung findet. Nehmen wir an, wir haben zwei Daten in einem Formular (die Mehrzahl von Datum ist Daten, ganz genau) definiert. Ein praktisches Beispiel ist unter anderem ein Suchformular für einen Flug.

In der Suche geben wir normalerweise zuerst das Abflugdatum und anschließend das Rückflugdatum an. Die Reihenfolge der Auswahl durch den Nutzer sollte in der Regel folgende sein: Er wählt zuerst den Beginn der Reise. Anschließend klickt er in das zweite Datumfeld und wählt das Rückkehrdatum aus. Um die Usibility noch besser zu gestalten, sollte man den Nutzer kein Enddatum wählen lassen, welches vor dem Startdatum liegt. Dies spart falsche Suchanfragen und für den Nutzer Zeit. Wird ein Datum vom Nutzer falsch ausgewählt, so kann man hier den Vergleich der Daten durchführen und je nach Bedarf das andere Datum um eine bestimmte Anzahl korrigieren.

Um zwei Daten vom Typ Date zu vergleichen, kann man folgendes Script verwenden:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
$(document).ready(function() {
  $(function() {
    $("#date1, #date2").datepicker({
      dateFormat: "dd.mm.yy",
      firstDay: 1,
      minDate: 0,
      showButtonPanel: true,
      closeText: 'Kalender schließen',
      currentText: 'Heute',
      dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      dayNamesMin: ['SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA'],
      monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai',
        'Juni', 'Juli', 'August', 'September', 'Oktober',  'November', 'Dezember'],
      showAnim: 'blind'
    }).change(function() {
      if($("#date1").datepicker("getDate") > $("#date2").datepicker("getDate")) {
        var fromDate = $("#date1").datepicker("getDate");
        $('#date2').datepicker("setDate",
          new Date(fromDate.getFullYear(),
            fromDate.getMonth(), fromDate.getDate() + 7));
        };
  }
});
</script>

Wie man oben sieht, wurde das Script aus dem vorherigen Post um einen change Event erweitert. Bei einer Änderung in einem der beiden Datumsfelder wird das Startdatum mit dem Enddatum verglichen. Ist es größer, das heißt liegt das Startdatum weiter in der Zukunft als das Enddatum, dann wird es mit getDate ausgelesen. Anschließend wird das Enddatum (Klasse Date) mit setDate überschrieben. Der neue Wert ist in unserem kleinen Codebeispiel: Startdatum + 7 Tage. Je nach Fall kann man nicht das Enddatum sondern das Startdatum anhand der Auswahl überschreiben, das könnt ihr selbst entscheiden, was für euch sinnvoller erscheint. Viel Spaß beim Modifizieren. 🙂

KategorienJavaScript Tags: , , , , , ,
  1. priez
    4. Oktober 2012, 10:57 | #1
    Antwort | Zitat

    Hallo,

    eine sehr nette Zusatzfunktion. Alternativ wäre folgende changefunktion. Prüfe ob >= und wenn ja setze nur einen Tag in die Zukunft. Warum eine Woche bevormunden ^^

    .change(function() {
    if($(„#date1“).datepicker(„getDate“) >= $(„#date2“).datepicker(„getDate“)) {
    var fromDate = $(„#date1“).datepicker(„getDate“);
    $(‚#date2‘).datepicker(„setDate“,
    new Date(fromDate.getFullYear(),
    fromDate.getMonth(), fromDate.getDate() + 1));
    };
    })

    Grüße

    priez

  2. Peter
    4. Oktober 2012, 11:18 | #2
    Antwort | Zitat

    @priez

    Ja, den den Wert kann man natürlich selbst festlegen wie man es gerade braucht – je nach Art der Webseite und Nutzung des Datepickers. 😉

  1. Bisher keine Trackbacks