jQuery datepicker minDate variable

Question

I'm usung the jQuery datepicker. In my "EndDate" textbox I'd like to use the date selected from the the "StartDate" textbox + 1. How do I do this?

I tried this but didn't work. In my start date code I had...

            test = $(this).datepicker('getDate');
            testm = new Date(test.getTime());
            testm.setDate(testm.getDate() + 1);

Then in my end date code I had...

minDate: testm,

but the end date still made all the days for the month available.

Thanks.

---

Edit. I'm curious as to why this doesn't work. In my start date datepicker I have this.. onSelect: function (dateText, inst) test = dateText

Why can't I come down into my end date datepicker and say, minDate: test?

---

Joel, edit here.

    $(".dateStartDatePickerBox").datepicker({
        minDate:'-0d',
        onSelect: function(dateText, inst)
        {
            test = $(this).datepicker('getDate');
            testm = new Date(test.getTime());
            testm.setDate(testm.getDate() + 1);

            $("#dateEndDatePickerBox").datepicker("option", "minDate", testm);
        }
    });

    $(".dateEndDatePickerBox").datepicker({
        onSelect: function()
        {

        }
    });

Answer 1

You'll need to set the min date dynamically on the change event of the start date.

Something like:

$("#startDate").change(function() {
    test = $(this).datepicker('getDate');
    testm = new Date(test.getTime());
    testm.setDate(testm.getDate() + 1);

    $("#endDate").datepicker("option", "minDate", testm);
});

Answer to the edit:

You cannot do the following:

var test;
$("#myinput").datepicker({
    onSelect: function() { test = $(this).datepicker("getdate"); }
});
$("#myotherinput").datepicker({
    minDate: test
});

Test is uninitialized at the time that minDate is being set on myotherinput. The process of setting the minDate doubtless requires DOM manipulation which datepicker manages on initialization or when "option" is called. Simply changing the variable that was used for initialization does not effect the already initialized datepicker.

Answer 2

Are you talking setting a max selection date?

StartDate = new Date("March 20, 2010");
EndDate = new Date("March 21, 2010");

$("#datepicker").datepicker({ minDate: StartDate, maxDate: EndDate, defaultDate: StartDate  });

Note the maxDate? That won't let you select any days past it ...

Answer 3

The API documentation for the date picker does seem to say it should take a Date object, but I've had this exact problem in the past and this is how I solved it.

Pass minDate an offset, instead of a date. You'll need a function to take your start date, add one to it and then get the offset from today. So you could have a function like:

function offsetFromToday( someDate ) {
  // clear time offset because we only want to take date into account
  someDate.setHours( 0 );
  someDate.setMinutes( 0 );

  // The number of milliseconds in one day
  var ONE_DAY = 1000 * 60 * 60 * 24;

  // Convert both dates to milliseconds
  someDate = someDate.getTime();
  var today = new Date().getTime();

  // Calculate the difference in milliseconds
  var difference = Math.abs( someDate - today );

  // Convert back to days and return
  return Math.floor( (difference / ONE_DAY) + 1 );
}

So you just need to get your start date a day ahead: StartDate.setDate( StartDate.getDate() + 1 ) or similar, and then pass it to this function to get an offset, then give that to minDate.

Answer 4

many thanks for that code, works beautifully!