首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在jquery UI日期选择器中突出显示日期

在jquery UI日期选择器中突出显示日期
EN

Stack Overflow用户
提问于 2011-07-28 17:48:55
回答 7查看 41.9K关注 0票数 19

如何使用beforeShowDay在jQuery UI日期选择器中突出显示日期。我有以下日期数组

代码语言:javascript
复制
Array
(
    [0] => 2011-07-07
    [1] => 2011-07-08
    [2] => 2011-07-09
    [3] => 2011-07-10
    [4] => 2011-07-11
    [5] => 2011-07-12
    [6] => 2011-07-13
)
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2011-07-28 19:25:32

我用以下方法解决了这个问题

代码语言:javascript
复制
var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#dateselector").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                    //return [false];
                    return [true, 'ui-state-active', ''];
                }
            }
            return [true];

        }
    });
});
票数 21
EN

Stack Overflow用户

发布于 2011-07-28 18:15:38

请看一下文档。

beforeShowDay该函数接受日期作为参数,并且必须返回一个等于true/false的数组,该数组表示该日期是否可选,1等于CSS类名称或'‘表示默认表示,2返回该日期的可选弹出工具提示。在显示它之前,每天都会在datepicker中调用它。

这意味着您需要创建一个函数,该函数将接受日期并返回一个参数数组,其中值为:

css

  • boolean-指示date是否可以是selected

  • string -将应用于date

  • 字符串的类的名称-此date的可选弹出工具提示

下面是一个示例:

代码语言:javascript
复制
var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

现在,您可以添加样式以突出显示日期

代码语言:javascript
复制
<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>
票数 34
EN

Stack Overflow用户

发布于 2016-02-01 00:38:02

发现投票最多的答案不起作用。对代码进行了一些更新,使其正常工作。$.inArray()主要搜索indexOf()。另外,我们不能直接比较两个日期是否相等。参考:Compare two dates with JavaScript

代码语言:javascript
复制
function inArrayDates(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i].getTime() == needle.getTime()) return i;
            found++;
        }
    return -1;
}

并将接受的函数更新为

代码语言:javascript
复制
if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6857025

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档