ansaurus

Question

JQuery UI DatePicker using 2 date fields trying to get date difference

Answer 1

+3 A:

I'm sure this example isn't perfect, but here's a working demo with most of what you require, using just jQuery and the jQuery UI Datepicker:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"&gt;&lt;/script&gt;
    <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>

Play around with that and see if you can integrate something similar into your app/site.

Jason Berry 2009-08-12 01:34:27

wow this is perfect! your brilliant!

2009-08-12 02:32:45

Glad it worked for you! Please mark this as the correct answer if you're happy with it!

Jason Berry 2009-08-13 01:41:51

Answer 2

A:

Hi Jason. I think the functionality of the arrival and departure shoud be reversed/swaped. I just changed over the labels and things became clearer but now the code looks wrong.

2009-08-17 23:10:25

Answer 3

+1 A:

when the departure date is not fixed on current month then the night doesn't properly added with departure date. for example today's date 25 th feb .if i set the departure date on 11 th march and fixed it for 5 nights then arrival date return 16th feb. where it has to be 16th march

kabirul islam 2010-02-25 09:00:45

Pay attention that minArrivalDate.setDate(departureDate.getDate() + 2); operate on the day in the month and not the date. Use getTime() and setTime() and add number of milliseconds instead of number of days.

snowflake 2010-05-30 14:16:53

Answer 4

A:

thanks solve my prob. Now i'm struggling how to use in JSF. using something not work

kviccina 2010-07-28 06:24:34

ansaurus

tags:

views:

answers:

JQuery UI DatePicker using 2 date fields trying to get date difference

related questions