2011-02-02 33 views
0

私は予約システムを作っていて、大きなカレンダー(テーブル)を1つ持ちたいと思っています。私は、テキストフィールドにしたいボックスで同じカレンダーで開始日と終了日を選択してください[JQuery]

:ユーザーが1つの日付を押すと

  • チェックイン日
  • チェックアウト日

はどのようにして、好ましくはjQueryを使って、それを行うことができますビッグカレンダーの場合、その日付の値はlitteサイドボックスの "Checkin date-field"に転送され、同時に、次の選択の前の日付は無効になります。次にユーザーが日付を押すと、「チェックアウト日」にその値が設定されます。

答えて

1

のjQuery UIの日付ピッカー

http://jqueryui.com/demos/datepicker/#date-range

<script> 
$(function() { 
    var dates = $("#from, #to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onSelect: function(selectedDate) { 
      var option = this.id == "from" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"); 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates.not(this).datepicker("option", option, date); 
     } 
    }); 
}); 
</script> 

<div class="demo"> 
    <label for="from">From</label> 
    <input type="text" id="from" name="from"/> 
    <label for="to">to</label> 
    <input type="text" id="to" name="to"/>  
</div> 
+0

をチェックアウト、私はしかし、ないポップアップ – Rup

+0

私はあなたがまだjQueryのUI日付ピッカーを持つことを行うことができます想像し、固定されたカレンダーを望むよう質問を読んで。 –

+0

私は私のために働く何かを書くことができました、私はすべてが完了したら、私は答えを投稿します:) –

関連する問題