javascript - jquery ui datepicker 上的日期范围选择器

Question

我使用 jquery ui 创建了一个日期范围选择器，您可以在其中使用相同的内联日历来进行两个日期选择。

在这里查看我的 fiddle :http://jsfiddle.net/kVsbq/4/

JS

$(".datepicker").datepicker({
    minDate: 0,
    numberOfMonths: [12, 1],
    beforeShowDay: function (date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function (dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        if (!date1 || date2) {
            $("#input1").val(dateText);
            $("#input2").val("");
            $(this).datepicker();
        } else {
            $("#input2").val(dateText);
            $(this).datepicker();
        }
    }
});

我想要做的是像这样的范围选择器:http://jsfiddle.net/D3wLX/1/

如果您选择较早的日期，则较早的日期会自动成为范围内的第一个日期，中间的日期会突出显示。现在，在我原来的 jquery ui 解决方案中，它只会将较早的日期放在第二个输入中，而不突出显示中间的日期。

Answer 1

您的脚本正是我要找的。我 fork 了你原来的 fiddle ，只对你的 onSelect 做了一点调整，让它按照你想要的方式工作。

onSelect: function(dateText, inst) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);


    if (!date1 || date2) {
        $("#input1").val(dateText);
        $("#input2").val("");
        $(this).datepicker();
    } else if( selectedDate < date1 ) {
        $("#input2").val( $("#input1").val() );
        $("#input1").val( dateText );
        $(this).datepicker();
    } else {
        $("#input2").val(dateText);
        $(this).datepicker();
    }
}

您的原始部分中缺少的只是一项检查，用于将当前选定的日期值与已捕获的日期值进行比较。

这是我的 fork fiddle : http://jsfiddle.net/sWbfk/