JQuery UI DatePicker avec 2 champs de date essayer d'obtenir la différence de date

Arrivée
Départ

Date d'arrivée ne doit pas être la date d'aujourd'hui - je suis ce trié en utilisant minDate: 1 dans le javascript

La date de départ doit toujours être un minimum de 2 jours avant la date d'arrivée. Je pensais que minDate: 3 fonctionnerait, mais c'est interroger hors de la date d'aujourd'hui. cela fonctionne bien si l'utilisateur choisit la date de demain dans le champ d'arrivée mais si l'utilisateur choisit une date d'arrivée dans le futur, il se casse. J'ai besoin de la date de départ pour référencer la date d'arrivée et la déplacer 2 jours avant la date minimale que l'utilisateur peut choisir, essentiellement lors de la réservation de cet hôtel l'utilisateur ne peut pas rester pour une nuit, 2 nuits minimum est requis.

Enfin, j'ai également besoin de calculer le nombre de nuits entre la date d'arrivée et la date de départ dans un troisième champ de texte. Ainsi, lorsque la date de départ est entrée, il entre automatiquement le nombre de nuits dans le troisième champ de texte. J'ai aussi besoin de travailler à l'envers, si un utilisateur décide de mettre en nombre de nuits j'ai besoin de la date de départ pour changer en conséquence.

Source

2009-08-11 Anonymous

Je suis sûr que cet exemple est pas parfait, mais voici une démonstration de travail avec la plupart de ce que vous avez besoin, en utilisant seulement jQuery et 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>

Jouez avec cela et voir si vous pouvez intégrer quelque chose de similaire dans votre application/site.

Source

2009-08-12 01:34:27

wow c'est parfait! votre brillant! –

Heureux que ça a marché pour vous! Veuillez marquer ceci comme la bonne réponse si vous êtes satisfait! –

Je pense que la fonctionnalité de l'arrivée et du départ doit être inversée/permutée. J'ai juste changé au-dessus des étiquettes et les choses sont devenues plus claires mais maintenant le code semble mal.

Source

2009-08-17 23:10:25

Lorsque la date de départ n'est pas fixée au mois en cours, la nuit n'est pas correctement ajoutée à la date de départ. par exemple la date d'aujourd'hui 25 fev .if j'ai fixé la date de départ le 11 mars et l'ai fixée pour 5 nuits puis la date d'arrivée retour 16 fev. où il doit être 16 mars

Source

2010-02-25 09:00:45

Faites attention à ce que minArrivalDate.setDate (departureDate.getDate() + 2); opérer le jour dans le mois et non la date. Utilisez getTime() et setTime() et ajoutez le nombre de millisecondes au lieu du nombre de jours. – snowflake

JQuery UI DatePicker avec 2 champs de date essayer d'obtenir la différence de date

Répondre

Questions connexes