jQuery UI Datepicker Range

Question

I asked a pretty similar question a few days ago, but this one is different enough that I didn\'t feel like derailing the other helpful topic. I basically want to set up two

Answer 1

$('#firstinputfield').datepicker({

    //your other configurations.     

     onSelect: function(){
     var start = $('#firstinputfield').val();
     var days = parseInt('1');
     var date = new Date(start);
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     var edate= new Date(y, m, d+days);
     $('#secondinputfield').datepicker({

        //Your other configurations.

        minDate:edate

        });
        }
     });

Answer 2

The jQuery UI datepicker documentation itself provides a nice example of how to link two datepickers to ensure valid date ranges.

See the example here: http://jqueryui.com/datepicker/#date-range

No extra plugin is needed, although if you wanted to create a simple one that would take the ids of the start and end date fields and plug in the necessary bits to the code hunk they give in the docs it would be pretty simple.

Answer 3

$(function() {

    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
    });

});

function customRange(input) {

    if (input.id == 'txtEndDate') {
        var minDate = new Date($('#txtStartDate').val());
        minDate.setDate(minDate.getDate() + 1)

        return {
            minDate: minDate

        };
    }

}​

crazy demo

Answer 4

onSelect: function(dateText, inst) {
  try {
    var date = $.datepicker.parseDate("dd/mm/yy", dateText);
      if (date) {
        date.setDate(date.getDate() + 1);
        $("#secondDatePicker").datepicker("setDate", date);
      }
    }
    catch(e) {}
}