jQueryのUI日付ピッカー私は</p> <ol> <li>到着</li> <li>出発</li> </ol> <p>到着日が今日の日付でなければなりません2つのjQueryの日付フィールドを持つ日付差

を取得しようとしている2つの日付フィールドを使用して - 私は、これはソートましたJavaScriptを使ってminDate：1を使用するjQueryのUI日付ピッカー私は</p> <ol> <li>到着</li> <li>出発</li> </ol> <p>到着日が今日の日付でなければなりません2つのjQueryの日付フィールドを持つ日付差

出発日は、到着日の2日前までに必ずする必要があります。私はminDate：3はうまくいくと思ったが、今日の日付を問い合わせている。ユーザーが到着フィールドで明日の日付を選択した場合はうまく動作しますが、将来ユーザーが到着日付を選択した場合は、それが破損します。私は到着日を参照し、2日先にユーザーが選択することができる最小限の日付として出発する必要があります、本質的にこのホテルを予約すると、ユーザーは1泊分宿泊することができません、2泊分が必要です。

最後に、到着日と出発日の間のナイト数を3番目のテキストフィールドに計算する必要があります。出発日が入力されると、自動的に第3テキストフィールドに夜間数が入力されます。私はまた逆に働く必要がある、ユーザーが夜の数を入れたいと思ったら、それに応じて出発日が必要だ。

出典

2009-08-11 Anonymous

私はこの例は完璧ではないが、ここでは単にjQueryと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>

はそれで遊んであなたができるかどうかを確認同様のものをあなたのアプリやサイトに統合する

出典

2009-08-12 01:34:27

これは完璧です！あなたの素晴らしい！ –

それはあなたのために働いてうれしい！あなたがそれに満足しているなら、これを正解とマークしてください！ –

到着と出発の機能が逆転/スワップされると思います。私はちょうどラベルを変更し、物事がより明確になったが、今はコードが間違って見える。

出典

2009-08-17 23:10:25

出発日が当月に確定していない場合は、出発日が正しく追加されません。例えば今日の日付25th feb。私は11日に出発日を設定し、それを5泊分に固定してから到着日を返します。16th feb。ここでは16日目になります

出典

2010-02-25 09:00:45

minArrivalDate.setDate（departureDate.getDate（）+ 2）;注意してください。日付ではなく月の日に作動します。 getTime（）とsetTime（）を使用し、日数の代わりにミリ秒数を追加します。 – snowflake

jQueryのUI日付ピッカー私は</p> <ol> <li>到着</li> <li>出発</li> </ol> <p>到着日が今日の日付でなければなりません2つのjQueryの日付フィールドを持つ日付差

答えて

関連する問題