jquery UI - datepicker - 根據第一個選擇設置第二個

使用jQuery 1.9.1 & jQuery-ui 1.10.3。我有一個頁面上會有2個日期選擇器。它們將用作從SQL表中進行選擇的過濾器。我正在閱讀表格中的min和max日期。jquery UI - datepicker - 根據第一個選擇設置第二個

datepicker1是開始日期，datepicker2是結束日期。使用上面的min和max，日曆應該以datepicker1開始，該日期作爲默認日期，並且datepicker2應該具有max作爲最近的可選日期。這兩個日期作爲一個艱難的開始&結束於我的日曆上的可選日期。沒有日期，但在任何日期的輸入框中都已設置。

我需要做的是，一旦用戶做出選擇（在datepicker控件中的任何一箇中），基於該選擇對其他datepicker執行規則，但是隻有在尚未選擇其他datepicker 。

一旦日期已經從一個選擇，則其它（未選）datepicker將具有從所選擇的一個14天的預先確定的窗口（> =如果datepicker1被首先選擇，< =如果datepicker2選擇第一）作爲其max（或min）的日期。例如：

頁的負荷，以及2012年12月10日&的2013年10月22日的maxDate的的minDate從查詢返回。 datepicker1有12/10日期，因爲它是「開始」（可以選擇最遠的一天）。 datepicker2 有10/22/2013日期作爲其「結束」（可以選擇的最新日期）。

用戶點擊日曆控件datepicker1並選擇 2013-02-14。

現在，datepicker2將在2013-02-14之後14天重新計算其新的maxDate，至。

然後用戶可以選擇任何日期> = 2013-02-14至2013-02-28作爲結束日期。

如果首先選擇datepicker2，則過程將被逆轉。

每個日期選擇器的選項幾乎相同的兩個：

$(function(){ 
     $("#datepicker1").datepicker({ 
     dateFormat: "yy-mm-dd", 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     changeMonth: true, 
     changeYear: true, 
     buttonImage: "calendar-blue.png", 
     buttonImageOnly: true, 
     buttonText: "Choose Start Date", 
     showOn: "both", 
     numberOfMonths: 1, 
     beforeShow: function(input, inst) { 
       $(".ui-datepicker").addClass("resizeDP"); 
       }, 
     onClose: function(selectedDate) { 
       $(".ui-datepicker").removeClass("resizeDP"); 
       } 
    }); 
});

我可以強制執行時加載頁面的日曆max和min日期，但不能使「新的「14天之一在選擇時適用。我嘗試了幾種不同的方法（主要在onClose），但不能讓它們中的任何一個起作用。

來源

2013-10-22 steve_o

你有沒有試過類似的東西？

$("#datepicker2").click(function(){ 
    if($("#datepicker1").val() != ""){ 
     $(this).datepicker("destroy"); 
     $(this).datepicker({ 
     //initialize datepicker2 based on datepicker1 value 
     }); 
     $(this).datepicker("show"); 
    } 
});

反之亦然。

注意我不確定日期選擇器是否在點擊事件之前打開。但你總是可以在mouse down甚至blur事件Datepicker1設置Datepicker2等。

來源

2013-10-23 01:13:13 Trevor

@steve_o請標記此答案爲接受，如果它回答你的問題，否則就什麼是不解決問題提供反饋。謝謝 – Trevor

jquery UI - datepicker - 根據第一個選擇設置第二個

回答

相關問題