jQuery UI Datepicker - 我如何在选择时突出显示特定的日期范围？

Question

我想，当用户选择日期时，请突出显示以下11天。目的是根据所选择的日期显示选择的12天范围。

我已经看到了来自http://www.filamentgroup.com/的“日期范围选择器”，但是这并没有真正给我想要的可视化，它只是让用户选择一个范围（从/到），因为我理解它。

关于我如何实现这一点的任何建议？

干杯

Answer 1

您可以使用beforeShowDay事件为需要突出显示的日期提供CSS样式。

代码：

$(document).ready(function(){
    var selected = null;

    $('#datePicker').datepicker({beforeShowDay: function(date) {
                        if (selected != null && date.getTime() > selected.getTime() &&
                            (date.getTime() - selected.getTime()) < 12*24*3600*1000) {
                            return [true, "highlighted"];
                        }
                        return [true, ""];
                    }});

    $("#datePicker").datepicker( 'option' , 'onSelect', function() {
            str = $(this).val().toString();
            selected=$.datepicker.parseDate('mm/dd/yy', str);
            console.log(selected);
            });
});