JQuery Restrict the difference between two datepickers

I have 2 datepickers

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

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

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

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.

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.

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.

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 == "") {

    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) {


Could i put the datepicker maxDate limit in that?



Something like this

$(function () {
        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'));
        minDate: -90, 
        maxDate: "+1D"

        onSelect: showUser,
        minDate: -90, 
        maxDate: "+1D"



Alternate suggestion:

If you are restricting the day they can pick in the "TO" datepicker to only 1 day, then why have a second datepicker at all? Just calculate 7 days from the FROM datepicker date and display it as text. Silly to make the user pick a date when theres only one option.


A little suggestion, try finding a JQuery Range Picker. They'll include some of these tedious functionality for you already. Going on google and searching just that gives you a ton of choices.


Back to the question though, you could put a callback function on 'onClose' in 'DateFrom' so that whenever the date is change, you will change the 'minDate' on 'DateTo' as well.


Use the beforeShow parameter to modify the minDate of the To field, and then simply use date objects and a +7 to select a date one week from the From date:

    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



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.