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

问题描述

我有 2 个日期选择器

I have 2 datepickers

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

我需要根据 datefrom 选择限制用户可以选择的天数.我希望能够将其限制为 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.

我猜理论是使用 DateTo 的 onselect 并检查 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" );

但这就是我能解密的全部内容.

but thats about all i can decypher.

两个日期选择器调用的 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"
    });
});

小提琴

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