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 - 根据第一个选择设置第二个

回答

相关问题