JQuery 限制两个日期选择器之间的差异答案

【问题标题】：JQuery Restrict the difference between two datepickersJQuery 限制两个日期选择器之间的差异
【发布时间】：2014-01-15 00:21:05
【问题描述】：

我有 2 个日期选择器

  $(function() {
    $('#DateFrom').datepicker({ onSelect: showUser, minDate: -90, maxDate: "+1D" });
  });

  $(function() {
    $('#DateTo').datepicker({ onSelect: showUser, minDate: -90, maxDate: "+1D" });
  });

这些是日期选择器的 2 个 html 输入

<input type="text" class="datepicker" name="DateFrom" id="DateFrom" /> 

<input type="text" class="datepicker"  name="DateTo" id="DateTo"  />

我需要根据 datefrom 选择限制用户可以选择的天数。我希望能够将其限制为 7 天。

因此，如果用户选择 1/1/14，那么他们应该最多只能选择 1/7/14，因此从 1/1/14 到 1/7/14 的任何日期。

我猜理论是使用DateTo 的onselect 并检查DateFrom 选择是什么，然后将maxDate 更改为距离DateFrom 选择7 天。

我大致了解了，我知道如何选择已经选择的日期：

var StartDate = $( "#DateFrom" ).datepicker( "getDate" );

但这就是我能解密的所有内容。

两个日期选择器调用的 onselect：

function showUser() {
    // Retrieve values from the selects
    var DateFrom = document.getElementById('DateFrom').value;
    var DateTo = document.getElementById('DateTo').value;
    var StartDate = $( "#DateFrom" ).datepicker( "getDate" );

    if (DateFrom=="" || DateTo == "") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","StreetHailDrivers.php?DateFrom="+DateFrom+"&DateTo="+DateTo,true);
    xmlhttp.send();
}

我可以把日期选择器的 maxDate 限制放在里面吗？

【问题讨论】：

你不是刚问这个吗？
我做了，但我宁愿被否决并给某个地方看，而不是不问这个问题。

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

类似的东西

$(function () {
    $('#DateFrom').datepicker({
        onSelect: function() {
            var date = $('#DateFrom').datepicker('getDate');
            date.setTime(date.getTime() + (1000*60*60*24*6));
            $('#DateTo').datepicker('option', 'maxDate', date);
            $('#DateTo').datepicker('option', 'minDate', $('#DateFrom').datepicker('getDate'));
            showUser();
        },
        minDate: -90, 
        maxDate: "+1D"
    });

    $('#DateTo').datepicker({
        onSelect: showUser,
        minDate: -90, 
        maxDate: "+1D"
    });
});

FIDDLE

【讨论】：

【解决方案2】：

替代建议：

如果您将他们可以在“TO”日期选择器中选择的日期限制为只有 1 天，那么为什么还要有第二个日期选择器呢？只需从 FROM datepicker 日期计算 7 天并将其显示为文本。当只有一个选项时让用户选择日期是愚蠢的。

【讨论】：

很确定他的意思是说他们只能选择 7 天或更晚的日期

【解决方案3】：

一个小建议，试着找一个 JQuery Range Picker。它们已经为您包含了其中一些乏味的功能。去谷歌和搜索只是给你一吨的选择。

等等..https://github.com/longbill/jquery-date-range-picker

回到问题，您可以在“DateFrom”中的“onClose”上放置一个回调函数，这样每当日期更改时，您也可以更改“DateTo”上的“minDate”。

【讨论】：

【解决方案4】：

使用beforeShow参数修改To字段的minDate，然后简单地使用日期对象和+7从From日期中选择一周的日期：

$("#to").datepicker({
    defaultDate: "+1w",  // set the default to 1 week from today

    beforeShow: function () {
        var date = $('#from').datepicker('getDate');  // From date
        date.setDate(date.getDate() + 7);             // 7 days after From date
        $( "#to" ).datepicker( "option", "minDate", date );  // set minDate to from+7
    }
});

Fiddle

【讨论】：