jQuery UI datepicker date range issue

Question

I made two date fields ("pickup" and "dropin"). And, I want to make sure that:

1. Pickup date should be earlier than dropin date.

2. When a user already choose his dropin and pickup dates and later he changes the pickup date later than dropin date, then the script automatically changes his dropin date later than the user chose. (for example, a user put "12/07/2011" in pickup date and "13/07/2011" in dropin date then later he changes his pickup date to "13/08/2011". If so, the script should set "13/08/2011" as the dropin date.

I referred to one of threads in this site. And, the following is the code I am having right now.

  $.datepicker.setDefaults({dateFormat: 'dd/mm/yy'});
  $("#pickup").datepicker({
            onSelect: function(dateText, inst){
              var minDate = $(this).datepicker('getDate');
              $('#dropin').datepicker('destroy').datepicker({
                        minDate: minDate
                    });
             },
            onClose: function(dateText, inst) {
                if(dateText == '') {
                    $('#dropin').val('');
                $('#dropin').datepicker('destroy').datepicker();
                }
             }
            });

            $("#dropin").datepicker();
            var set=$("#dropin").datepicker('getDate');
            alert(set.getDate());

It looks like that it satisfies the first one. But, I have no idea about the second constraint. And, it keeps stating that 's' is null.

Can you help me with the issue? Thank you very much.

Answer 1

Try somethig like this:

    var date = new Date();
    $.datepicker.setDefaults({
        'dateFormat' : 'yy-mm-dd',
        'onSelect' : function(dateText, inst){
            instance = $(this).data('datepicker'),
            selectedDate = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
                dateText,
                instance.settings
            );
            if (this.id == 'datepicker-pickup') {
                $('#' + 'datepicker-dropin')
                    .datepicker('option', 'minDate', selectedDate)
                    .datepicker('refresh');
                datePickup = dateText;
            }
            if (this.id == 'datepicker-dropin') {
                $('#' + 'datepicker-pickup')
                    .datepicker('option', 'maxDate', selectedDate)
                    .datepicker('refresh');
                dateDropin = dateText;
            }
        }
    });
    $('#datepicker-pickup').datepicker({
        'defaultDate' : datePickup,
        'maxDate' : dateDropin
    });
    $('#datepicker-dropin').datepicker({
        'defaultDate' : dateDropin,
        'minDate' : datePickup,
        'maxDate' : new Date(date.getFullYear(), date.getMonth(), date.getDate())
    });