jQuery UI の datepicker を使用して、選択リストを含むカレンダーを表示しています。入力フィールドと選択リストは同期されているため、日付ピッカーまたは選択リストのいずれかの値を変更すると、他のフィールドの値もそれに応じて変更されます。
日付ピッカーは、日付範囲の制限機能 (http://jqueryui.com/datepicker/#min-max) と共に使用されます。それはその仕事を完全に行います-END日はSTART日より前にすることはできず、それに応じて前の日を選択することはできません. もちろん、START日がEND日より後であることも選択できません。
問題は選択リストにあります。「日付範囲の制限」が機能しても、選択リストで任意の日付を選択できます。したがって、選択リストを使用する場合は、この解決策を探しています (カレンダー アイコンのみを使用する場合は何にも影響しないはずです)。
最初に開始日を選択すると、終了日は選択した日付の 1 日後に自動的に変更されます。
両方の日付を選択した状態で、開始日を終了日の後の日付に変更することにした場合、終了日は再び 1 日後に変更されます。
両方の日付を選択しており、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 の例全体を次に示します。