jquery-ui - 需要在 jquery datepicker 中突出显示日期范围

Question

This question already has answers here:

Highlight dates in specific range with jQuery's datepicker

(7 个回答)


5年前关闭。




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

最佳答案

您可以使用 jQuery UI datepicker beforeShowDay 函数并在其中检查日期是否必须根据您的范围突出显示。

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, '', ''];
        }
    });
});

这是一个工作 fiddle : http://jsfiddle.net/IrvinDominin/zz9u4/

关于jquery-ui - 需要在 jquery datepicker 中突出显示日期范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16317396/

上一篇：cassandra - 即使是简单的查询也不适用于集群 ("Request did not complete within rpc_timeout")

下一篇：ruby-on-rails - 有人可以在 Rails 中用 Ruby 定义一个引擎吗？

Answer 1

您可以使用 jQuery UI datepicker beforeShowDay 函数并在其中检查日期是否必须根据您的范围突出显示。

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, '', ''];
        }
    });
});

这是一个工作 fiddle : http://jsfiddle.net/IrvinDominin/zz9u4/