1

jQuery UI の datepicker を使用して、選択リストを含むカレンダーを表示しています。入力フィールドと選択リストは同期されているため、日付ピッカーまたは選択リストのいずれかの値を変更すると、他のフィールドの値もそれに応じて変更されます。

日付ピッカーは、日付範囲の制限機能 (http://jqueryui.com/datepicker/#min-max) と共に使用されます。それはその仕事を完全に行います-END日はSTART日より前にすることはできず、それに応じて前の日を選択することはできません. もちろん、START日がEND日より後であることも選択できません。

問題は選択リストにあります。「日付範囲の制限」が機能しても、選択リストで任意の日付を選択できます。したがって、選択リストを使用する場合は、この解決策を探しています (カレンダー アイコンのみを使用する場合は何にも影響しないはずです)。

  1. 最初に開始日を選択すると、終了日は選択した日付の 1 日後に自動的に変更されます。

  2. 両方の日付を選択した状態で、開始日を終了日の後の日付に変更することにした場合、終了日は再び 1 日後に変更されます。

  3. 両方の日付を選択しており、END 日付を START 日付より前の日付に変更することにした場合、START 日付は END 日付の 1 日前に変更する必要があります。

このコードを使用して#1と#2に影響を与えようとしました:

$('#start').change(function() {
  var date2 = $('#start').datepicker('getDate', '+1d');
  date2.setDate(date2.getDate()+1);
  $('#end').datepicker('setDate', date2);
});

ただし、何の影響もないようです。jsFiddle の例全体を次に示します。

http://jsfiddle.net/JW4jg/

4

0 に答える 0