需要在jQuery datepicker中突出显示日期范围 [英] Need to highlight range of dates in jquery datepicker

问题描述

我正在使用jQuery UI来显示一个内联日期选择器，我有一个开始日期和一个结束日期.我要突出显示它们之间的日期.

I'm using jQuery UI to display an inline datepicker in this i have a start date and an end date. I want to highlight the dates in between them.

推荐答案

您可以使用jQuery UI datepicker

You can use the jQuery UI datepicker beforeShowDay function and inside it check if the date must be highlighted according to your range.

一个函数需要一个日期作为参数，并且必须返回一个带有 [0]等于true/false，表示此日期是否为 可选的 1 等于CSS类名，默认为" 演示文稿，以及[2]此日期的可选弹出式工具提示.它是 在日期选择器中的每一天都显示之前调用它.

A function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, 1 equal to a CSS class name or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

示例:

var date1 = new Date(2013, 4, 6);
var date2 = new Date(2013, 4, 17);

$(document).ready(function () {
    $('#datepicker').datepicker({
        beforeShowDay: function (date) {
            debugger
            if (date >= date1 && date <= date2) {
                return [true, 'ui-state-error', ''];
            }
            return [true, '', ''];
        }
    });
});

这是一个有效的小提琴: http://jsfiddle.net/IrvinDominin/zz9u4/

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/zz9u4/

这篇关于需要在jQuery datepicker中突出显示日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！