Question

I want to use datetime picker in 4 text box.

JQuery datepicker for 4 inputs textboxes with restricting range

The date enter/select in second textbox must be equal/greater than (but not less ) first text box,
similarly date enter in third textbox must be greater/equal than (but not less ) second textbox and finally that of fourth textbox must must greater than(but not less ) third textbox.

Implementing datetime picker in two input textbox seems easy…but how can i implement datetime picker in more than 2 input textbox.Need help in this problem.
here is the screen shot

Answer 1

Let’s assume that the first Departure text field has the id fd1 and the second fd2. You can do something like the following:

$("#fd1").datepicker({
     onSelect: function (theDate) {
                   //theDate is the date String inside the fd1 textField
                   //create a date var and add it to the fd2 datepicker as minDate
                    var then= new Date();
                    var day = parseInt(theDate.substring(0, 2)) + 1;
                    var month = parseInt(theDate.substring(3, 5));
                    var year = theDate.substring(6, 10);
                    then.setFullYear(year, month - 1, day);
                   $("#fd2").datepicker('option', 'minDate', then);
               }
});

EXTRA CAUTION: on the previous example the format of the date is dd/MM/YYYY – e.g. 16/02/2011, you should alter the substring functions according to YOUR date format.

On the second date field you set as min date the date of the first.
You will do the same for the second -> third, third -> fourth date fields.