Question

我有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"  />

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

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

我猜理论是使用DateTo的取消选择并检查DateFrom选择的内容，然后将maxDate更改为DateFrom的7天选择。

我得到了一般的想法，我知道如何选择已经选择的日期：

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

但多数民众赞成我可以decypher。

两个datepickers调用的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();
}

我可以在其中添加datepicker maxDate限制吗？

Answer 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

Answer 2

替代建议：

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

Answer 3

一点建议，试着找一个JQuery Range Picker。他们已经为您准备了一些繁琐的功能。继续谷歌搜索只是为了给你很多选择。

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

回到这个问题，你可以在'DateFrom'的'onClose'上设置一个回调函数，这样每当日期改变时，你也会改变'DateTo'上的'minDate'。

Answer 4

使用beforeShow参数修改minDate字段的To，然后只使用日期对象和+7选择{一周的日期} {1}}日期：

From

Fiddle

JQuery限制两个日期选择器之间的区别

4 个答案: