jQuery UI日期选择器日期范围问题

Question

我创建了两个日期字段（“取车”和“还车”）。我想确保以下几点：

1. 取车日期应早于还车日期。

2. 当用户已经选择了还车和取车日期，后来更改了取车日期晚于还车日期时，脚本会自动将他的还车日期设置为晚于用户选择的日期。 （例如，用户在取车日期中输入“2011年12月7日”，在还车日期中输入“2011年12月8日”，然后他稍后将取车日期更改为“2011年8月13日”。如果是这样，脚本应将“2011年8月13日”设置为还车日期。

我参考了这个网站上的一个线程。下面是我现在拥有的代码。

  $.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());

看起来第一个限制条件已经满足了，但我对第二个限制条件一无所知。并且它一直在声明's'为空。

你能帮我解决这个问题吗？ 非常感谢。

- Sangin Lee

---

jQuery UI网站上的日期范围示例有帮助吗？http://jqueryui.com/demos/datepicker/#date-range - William Niu

恐怕不行...我对这个东西还是新手。我已经搜索了所有页面，但没有找到。我不明白为什么我的 dropin 日期会显示 'null'。 - Sangin Lee

请您能否在jsfiddle.net上设置这个示例，这样我们就可以更轻松地进行调试了吗？ - William Niu

Answer 1

尝试像这样：

    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())
    });

- Oleg