JQuery限制两个日期戳记之间的差异 [英] JQuery Restrict the difference between two datepickers

问题描述

我有2个日期作者

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

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

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

and these are the 2 html inputs for the date pickers

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

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

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

I need to restrict the number of days that a user can choose based on the datefrom selection. I want to be able to restrict it to 7 days.

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

So if a user selects 1/1/14, then they should only be able to select up to 1/7/14, so any date from the 1/1/14 to 1/7/14.

我想这个理论是使用<$ c的onselect $ c> DateTo 并检查 DateFrom 选择是什么，然后将 maxDate 更改为从 DateFrom 选择7天。

I guess the theory is to use the onselect of the DateTo and check what the DateFrom selection is, then change the maxDate to be 7 days from the DateFrom selection.

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

I get the general idea, and i know how to select the already selected date:

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

但是我可以解密。

两个日期戳记调用的onselect：

the onselect for both datepickers calls:

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限制在那里吗？

Could i put the datepicker maxDate limit in that?

推荐答案

这样的事情

$(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

这篇关于JQuery限制两个日期戳记之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！