JQuery UI Datepicker mit 2 Datumsfelder versuchen Datum Unterschied

Ankunft
Abfahrt

Ankunftsdatum darf nicht heutige Datum zu bekommen - ich dies sortiert bekam mit minDate: 1 in der Javascript

Das Abreisedatum muss immer mindestens 2 Tage vor dem Ankunftsdatum sein. Ich dachte minDate: 3 würde funktionieren, aber das ist ab heute Datum abfragen. Es funktioniert gut, wenn der Benutzer das morgige Datum im Ankunftsfeld auswählt, aber wenn der Benutzer ein Ankunftsdatum in der Zukunft wählt, bricht es ab. Ich brauche das Abreisedatum, um das Ankunftsdatum zu referenzieren und es 2 Tage voraus zu verschieben, als das Mindestdatum, das der Benutzer wählen kann, im Wesentlichen bei der Buchung dieses Hotels kann der Benutzer nicht für eine Nacht bleiben, 2 Nächte sind erforderlich.

Schließlich muss ich auch die Anzahl der Nächte zwischen dem Ankunftsdatum und dem Abreisedatum in ein drittes Textfeld berechnen. Wenn das Abreisedatum eingegeben wird, gibt es automatisch die Anzahl der Nächte im 3. Textfeld ein. Ich brauche es auch, um umgekehrt zu arbeiten, wenn ein Benutzer sich entscheidet, Anzahl der Nächte zu setzen, brauche ich das Abfahrtsdatum, um mich dementsprechend zu ändern.

Quelle

2009-08-11 Anonymous

Ich bin sicher, dass dieses Beispiel nicht perfekt ist, aber hier ist eine Arbeits Demo mit den meisten, was Sie benötigen, mit nur jQuery und die jQuery UI Datepicker:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title>Datepicker &amp; Difference</title> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     var DatePicked = function() { 
      var departure = $("#departure"); 
      var arrival = $("#arrival"); 
      var nights = $("#nights"); 

      var triggeringElement = $(this); 

      var departureDate = departure.datepicker("getDate"); 

      var minArrivalDate = new Date(); 
      if (departureDate != null) { 
       minArrivalDate.setDate(departureDate.getDate() + 2); 
      } else { 
       minArrivalDate.setDate(minArrivalDate.getDate() + 1); 
      } 
      arrival.datepicker('option', 'minDate', minArrivalDate); 

      var arrivalDate = arrival.datepicker("getDate"); 

      if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "nights") { 
       var oneDay = 1000*60*60*24; 
       var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime())/oneDay); 
       nights.val(difference); 
      } else if (departureDate != null && triggeringElement.attr("id") == "nights") { 
       var nightsEntered = parseInt(nights.val()); 
       if (nightsEntered >= 2) { 
        var newArrivalDate = new Date(); 
        newArrivalDate.setDate(departureDate.getDate() + nightsEntered); 
        arrival.datepicker("setDate", newArrivalDate); 
       } else { 
        alert("Nights must be greater than 2."); 
       } 
      } 
     } 
     $(function() { 
      $("#departure, #arrival").datepicker({ 
       onSelect: DatePicked 
      }); 
      $("#nights").change(DatePicked); 
      DatePicked(); 
     }); 
    </script> 
</head> 
<body> 
<div> 
    <label for="departure">Departure</label> 
    <input type="text" id="departure" name="departure" /> 
</div> 
<div> 
    <label for="arrival">Arrival</label> 
    <input type="text" id="arrival" name="arrival" /> 
</div> 
<div> 
    <label for="nights">Nights</label> 
    <input type="text" id="nights" name="nights" /> 
</div> 
</body> 
</html>

mit dem Spielen um und sehen, wenn Sie können Integriere etwas ähnliches in deine App/Site.

Quelle

2009-08-12 01:34:27

wow das ist perfekt! Dein Brilliant! –

Froh, dass es für Sie funktioniert hat! Bitte markieren Sie diese als richtige Antwort, wenn Sie damit zufrieden sind! –

Ich denke, dass die Funktionalität der Ankunft und Abfahrt umgekehrt/swaped werden soll. Ich habe gerade die Etiketten gewechselt und die Dinge wurden klarer, aber jetzt sieht der Code falsch aus.

Quelle

2009-08-17 23:10:25

Wenn das Abreisedatum nicht auf den aktuellen Monat festgelegt ist, wird die Nacht nicht ordnungsgemäß mit dem Abfahrtsdatum hinzugefügt. zum Beispiel das heutige Datum 25. Feb.if Ich habe das Abreisedatum am 11. März festgelegt und es für 5 Nächte und dann Ankunftsdatum 16. Februar festgelegt. wo es sein muss 16. März

Quelle

2010-02-25 09:00:45

Achten Sie darauf, dass minArrivalDate.setDate (departureDate.getDate() + 2); operieren am Tag des Monats und nicht am Datum. Verwenden Sie getTime() und setTime() und fügen Sie die Anzahl der Millisekunden anstelle der Anzahl der Tage hinzu. – snowflake

JQuery UI Datepicker mit 2 Datumsfelder versuchen Datum Unterschied

Antwort

Verwandte Themen