0

ああ..私は困惑しています....

jQuery 日付ピッカー UI を実行している予約モジュールがあります。到着日フィールドと出発日フィールドがあり、それぞれに日付ピッカー オブジェクトが開始されています。

デフォルトの到着日を今日の日付にしたいのですが、次のようにしてこれを達成しました：

   <script type="text/javascript">
      $(document).ready(function(){

          $(".arrive").datepicker();
          $(".depart").datepicker();

          $(".arrive").datepicker('setDate', new Date());

      });
   </script>

これは完全に機能しますが、ユーザーが到着日を選択すると、デフォルトの出発日をユーザーが選択した到着日の 1 日後に設定する必要があります。date-picker オブジェクトの onSelect イベントを使用して、arrival フィールドから値を取得して日を追加しようとしましたが、役に立ちませんでした。私は以前にこの機能を見たことがありますが、それほど難しいことではないと思います。何か案は？テキスト フィールドの私の html は次のとおりです。

<ul>
  <li>  
    <label>Arriving</label>     
    <span class="dateinput">                                                   
        <input class="arrive" type="text" value="" name="startDate" />                                  
        <img id="arrive"  src="images/calendar_icon.png"  />
        <div class="clear"></div>
    </span>
  </li>

  <li>  
    <label>Departing</label>        
    <span class="dateinput">                                
        <input class="depart" name="endDate" value="" type="text"  />               
        <img src="images/calendar_icon.png" />
        <div class="clear"></div>
    </span> 
  </li>
</ul>

この問題で私を助けてくれる人に感謝します。

4

3 に答える 3

7

ドキュメンテーションをインスピレーションとして使用する: 

<script type="text/javascript">
  $(document).ready(function(){

      $(".arrive").datepicker({
          onSelect: function( selectedDate ) {
            // Parse the selected date
            var instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            // Add one day
            date.setDate(date.getDate()+1);

            // Set the new date
            $(".depart").datepicker('setDate', date);               
        }
      });
      $(".depart").datepicker();

      $(".arrive").datepicker('setDate', new Date());
  });
</script>
于 2011-09-19T20:35:25.640 に答える
0

ドキュメントを見ましたか？

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

-> ソースを表示

特定の問題に部分的に使用できるonSelectコードさえありました

于 2011-09-19T20:26:54.620 に答える