使用 jQuery 的 datepicker 突出显示特定范围内的日期

Posted 2023-02-25

【中文标题】使用 jQuery 的 datepicker 突出显示特定范围内的日期

【英文标题】：Highlight dates in specific range with jQuery's datepicker

【发布时间】：2011-01-24 00:40:01

【问题描述】：

我需要突出显示开始日期和结束日期之间的日期，我应该能够指定。谁能帮我？

【问题讨论】：

抱歉需要更多。您想突出显示一个范围还是仅突出两个日期？您是在使用 jquery ui datepicker 还是自己构建？

可能重复：Need to highlight range of dates in jquery datepicker（或其他方式？）

【参考方案1】：

您可以使用beforeShowDay event。每个需要在日历中显示的日期都会调用它。它传入一个日期并返回一个带有[0]= isSelectable, [1]= cssClass, [2]=Some tooltip text的数组

$('#whatever').datepicker(
            beforeShowDay: function(date) 
             if (date == myDate) 
              return [true, 'css-class-to-highlight', 'tooltipText'];
              else
              //this will allow the cell be selected without been highlighted
              return [true,'']
              
           
);

【讨论】：

如果您不想突出显示某一天，请不要忘记返回 [true, '']：***.com/a/9358119/664132

参数“date”是如何初始化的？函数（date）的值的开始和结束日期是什么？

【参考方案2】：

这是一个工作示例！你需要从这里用http://jqueryui.com/download 制作一个带有核心、小部件和日期选择器的包。

要放在前面的javascript部分：

<script>
$(document).ready(function() 

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

    $('#datepicker').datepicker(                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 3,
    );

    function highlightDays(date) 
        for (var i = 0; i < dates.length; i++) 
            if (new Date(dates[i]).toString() == date.toString())               
                return [true, 'highlight', tips[i]];
            
        
        return [true, ''];
      

);
</script>

html 部分：

<div id="datepicker"></div>

在某处添加这个 CSS：

    td.highlight border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;
td.highlight a background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;

您需要制作一个名为 bg.png 的小图像才能使其工作

【讨论】：

但这不会改变日期的bgcolor，只会改变我们可以看到边缘的表格单元格。

您将不得不添加另一段 CSS 代码来指定元素内 标记的颜色，例如 .highlight a background: red; 现在两者都是红色 :)

我试过了。不适用于该选择器 - 请参阅此处：***.com/questions/9023818/…

太棒了 - 设置特定单元格的背景颜色时遇到问题。你的CSS已经解决了这个问题。谢谢

【参考方案3】：

我想我会投入两分钱，因为它看起来比其他人更快更轻：

jQuery(function($) 
  var dates = 
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  ;

  $('#datepicker').datepicker(
    beforeShowDay: function(date) 
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) 
        return [true, 'highlight', (dates[search] || '')];
      

      return [false, '', ''];
    
  );
);

【讨论】：

这对我来说非常有效 - 复制和粘贴。干得好@mark-murphy！

【参考方案4】：

不确定这是否仍然有用，但由于这对我有用，我想分享我所做的：

在我的 JavaScript 中：

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker( beforeShowDay: highLight );

function highLight(date) 
        for (var i = 0; i < holidays.length; i++) 
            if (new Date(holidays[i]).toString() == date.toString()) 
                return [true, 'ui-state-holiday'];
            
        
        return [true];
    

在我添加的 jquery-ui-theme.css 中

.ui-state-holiday .ui-state-default 
    color: red;

如果您还想突出显示周末，则必须改用此 CSS

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default 
    color: red;

结果如下：

（请注意，我已将语言配置为西班牙语，但这对这段代码并不重要）

【参考方案5】：

如果您使用的是 Keith Wood 的 datepick，您可以使用取自 here 的以下示例

$(selector).datepick(onDate: highlightDays); 

function highlightDays(date)  
    return selectable: true, dateClass: 'highlight-custom', title: 'tooltip'; 

【参考方案6】：

聚会迟到了，但这是我用来测试的 JSFiddle：

https://jsfiddle.net/gq6kdoc9/

HTML：

  <div id="datepicker"></div>

JavaScript：

var dates = ['11/13/2017', '11/14/2017'];
   //tips are optional but good to have
   var tips = ['some description', 'some other description'];

   $('#datepicker').datepicker(
     dateFormat: 'dd/mm/yy',
     beforeShowDay: highlightDays,
     showOtherMonths: true,
     numberOfMonths: 3,
   );

   function highlightDays(date) 
     for (var i = 0; i < dates.length; i++) 
       if (new Date(dates[i]).toString() == date.toString()) 
         return [true, 'highlight', tips[i]];
       
     
     return [true, ''];
   

还有 CSS：

td.highlight 
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;


td.highlight a 
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;

建立在上面 Mike 的工作示例之上！

【参考方案7】：

mugur，您的代码在 Firefox 或 Safari 中不太适合我，它需要格式化 date 变量（我从 here 获得）。这里

function highlightDays(date) 
for (var i = 0; i < dates.length; i++) 

var d = date.getDate();
var m =  date.getMonth();
m += 1;  // JavaScript months are 0-11
var y = date.getFullYear();

var dateToCheck = (d + "/" + m + "/" + y);
    if (dates[i] == dateToCheck) 
        return [true, 'highlight', tips[i]];
    
    
return [true, ''];

当然，正如上述函数所代表的那样，它不考虑前导零填充，因此需要将 dates 数组更改为：

var dates = ['22/1/2014', '23/1/2014'];

【讨论】：

您的回答对我有用。如果我的日期是 '31/08/2015' 格式怎么办？？

我不是在电脑前，而是在我的脑海中，我将日期拆分为日、月、年组件并重新组合以传递给此函数。拆分过程可能会导致“08”变成“8”。或者，Mugur 的答案不会起作用吗？