Question

使用jQuery 1.9.1＆amp; jQuery-ui 1.10.3。我有一个页面，上面有2个日期选择器。它们将用作从SQL表中进行选择的过滤器。我正在阅读一个表格行，其中包含表格中的min和max日期。

datepicker1是开始日期，datepicker2是结束日期。使用上面的min和max，日历应该以{{1}}开头，默认日期为datepicker1 datepicker2最近可选择max日期。这两个日期是一个艰难的开始和结束我日历上的可选日期。在任一日期的输入框中都没有设置日期。

我需要做的是，一旦用户做出选择（在datepicker控件中的任何一个），根据该选择强制执行另一个datepicker的规则，但仅限于另一个datepicker尚未被选中。

一旦从一个中选择了一个日期，另一个（未选中的）datepicker将具有距所选择的一个14天的预定窗口（＆gt; =如果首先选择datepicker1，＆lt; =如果首先选择datepicker2）作为其max（或min）日期。例如：

页面加载，以及2012-12-10＆amp;的minDate 2013-10-22的maxDate是   从查询返回。 datepicker1有12/10的日期   “开始”（可以选择的最远的一天）。 datepicker2   将2013年10月22日的日期作为其“结束”（可以选择的最新日期）。

用户点击datepicker1中的日历控件并选择   2013年2月14日。

现在，datepicker2将重新计算其新的maxDate   在2013-02-14之后的14天。

用户可以选择任何日期＆gt; = 2013-02-14至2013-02-28 as   结束日期。

如果首先选择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中），但不能使它们中的任何一种工作。

Answer 1

你尝试过这样的事吗？

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

反之亦然。

注意我不确定日期选择器是否在点击事件之前打开。但是你总是可以在Datepicker1的mouse down甚至blur事件上设置Datepicker2等。

jquery UI - datepicker - 根据第一个选择设置第二个

1 个答案: