Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Datepicker - Limit minDate according to previous calendar

I have 2 datepickers as following:

$(function() {
    $( "#datepicker1, #datepicker2" ).datepicker({
    minDate: 'today',
    maxDate: "+90D",
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "D, dd MM, yy"
    });
});

I want datepicker2 have the minimumdate value selected in the first calendar + 1 day.(i.e. if first calendar date was May 16th, 2nd calendar should have the min date set to May 17th)

like image 236
Romin Avatar asked May 16 '11 14:05

Romin


2 Answers

I had the same scenario. What I did was to set the minDate value of the second datepicker in the "select" event handler of the first datepicker. Worked like a charm.

EDIT: Here is an example:

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function (dateValue, inst) {
        $("#datepicker2").datepicker("option", "minDate", dateValue)
    }
});
like image 168
tobias86 Avatar answered Oct 10 '22 11:10

tobias86


Detailed answers here don't really answer the question, which was "how do I set the minDate of the second datepicker, on the value of the first datepicker + 1 DAY" ?

It might be too late for you but since I quite struggled to find a solution, here it is :

$(function() {
    $( "#datepicker1" ).datepicker({
        minDate: 'today',
        maxDate: "+90D",
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        dateFormat: "D, dd MM, yy"
        onClose: function(selectedDate, inst) {
            var selected_date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
            new_date = new Date(selected_date.getTime() + 86400000);
            new_date = jQuery.datepicker.formatDate('dd/mm/yy', new_date);
            $( "#datepicker2" ).datepicker( "option", "minDate", new_date);
  }
    });
});

Explanations :

You have to get a Date object from the datepicker1 field, with Year, Month, Day.

Then, you call this Date object and transform it into a UNIX Timestamp, to which you add 86400000 (number of microseconds in one day). Which gives you a new Date object.

After that, you format the Date object you just created to the correct display (which may not be the one presented in this answer), by calling formatDate method of jQuery DatePicker API.

In the end, you apply the minDate of your datepicker2 field with your new_date.

like image 39
Jivan Avatar answered Oct 10 '22 12:10

Jivan