使用jQuery的日期选择器突出显示特定范围内的日期

Question

我需要突出显示在开始日期和结束日期之间的日期，我应该能够指定这些日期。有人能帮我吗？

- user286928

---

抱歉，需要更多信息。您想要突出显示一个范围还是只有两个日期？您正在使用jQuery UI日期选择器还是自己构建的？ - Luke Duddridge

可能是重复问题：需要在jQuery日期选择器中突出显示日期范围（或者反过来？） - Mogsdad

Answer 1

您可以使用beforeShowDay事件。它将为需要在日历中显示的每个日期调用。它传递一个日期并返回一个数组，其中[0] = isSelectable，[1] = cssClass，[2] =某些工具提示文本

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

- Dave Archer

---

如果不想突出显示某一天，请不要忘记返回 [true, '']：https://dev59.com/5WDVa4cB1Zd3GeqPfKC5#9358119 - basic6

参数“date”是如何初始化的？对于函数（日期），该值的开始和结束日期是什么？ - R D

Answer 2

这是一个可用的示例！您需要使用http://jqueryui.com/download下载core，widget和datepicker以制作一个包。

放置在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 的小图片才能使其正常工作

- Mike

---

但这并不会改变日期的背景颜色，只会改变表格单元格的背景颜色，我们只能看到边缘。 - mplungjan

你需要添加另一段CSS代码来指定元素内<a>标签的颜色，就像这样：.highlight a { background: red; } 现在两者都会是红色的 :) - Mike

我尝试过了，但是那个选择器不起作用 - 请参见这里：http://stackoverflow.com/questions/9023818/correct-way-to-change-specific-dates-cell-background-color-on-datepicker - mplungjan

太棒了 - 我一直在解决如何设置特定单元格的背景颜色的问题。您提供的CSS已解决了这个问题。谢谢。 - Fetchez la vache

Answer 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

---

这对我来说完美无缺 - 复制并粘贴。做得好，@mark-murphy！ - HPWD

Answer 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;
}

这是结果：

(注意，我已将语言配置为西班牙语，但这对代码不重要)

- Angelo Bernardi

Answer 5

如果您正在使用Keith Wood的datepick，您可以使用以下示例，该示例取自此处

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

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

- a_fan

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

And 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的工作示例构建！

- Ben

Answer 7

Mugur，你的代码在Firefox或Safari上并没有完全运行，它需要对date变量进行格式化（我从这里找到了相关信息）。在这里。

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'];

- Todd

---

你的答案对我有用。如果我手头的日期是'31/08/2015'格式，怎么办？ - Rushikesh Gomekar

我现在不在电脑旁，但是就我想的，我会把日期分成日、月、年三个部分再重新组合起来传递到这个函数里。很可能在分割过程中 '08' 会变为 '8'。或者 Mugur 的回答能起作用吗？ - Todd