在jquery UI datepicker中突出显示日期

Posted 2021-04-24

我如何使用beforeShowDay突出显示jQuery UI datepicker中的日子。我有以下日期数组

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
)

答案

看看文档。

beforeShowDay该函数将日期作为参数，并且必须返回一个数组，其中[0]等于true / false，指示此日期是否可选，[1]等于CSS类名称或''作为默认值演示文稿，以及[2]此日期的可选弹出工具提示。在显示日期选择器之前，它会在每天被调用。

这意味着您需要创建一个函数来获取日期并返回一个参数数组，其中值为：

1. boolean - 表示是否可以选择日期
2. string - 将应用于日期的css类的名称
3. string - 此日期的可选弹出工具提示

这是一个例子：

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

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

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>

另一答案

我用了解决了这个问题

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

        }
    });
});

另一答案

发现投票最多的答案不起作用。稍微更新了代码以使其正常工作。 $ .inArray（）主要搜索indexOf（）。我们也不能直接比较两个日期的平等。参考：Compare two dates with 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;
}

并将接受的功能更新为

if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }

另一答案

JS中的日期是对象Date的实例，因此无法使用==或===正确检查日期是否相等。

简单方案：

var your_dates = [
   new Date(2017, 4, 25),
   new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
    beforeShowDay: function(date) {
        are_dates_equal = d => d.getTime() === date.getTime();
        if(your_dates.some(are_dates_equal)) {
            return [true, 'ui-state-active', ''];
        }
        return [true, '', ''];
    }
})

另一答案

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

您将beforeShowDay中的date参数与数组中的日期进行比较，如果匹配，则返回上面链接中定义的数组。

在您从beforeShowDay返回的数组中，第二个元素用于设置将在日期使用的类名，然后您可以使用css为该类设置样式。

另一答案

我得到了一个简单的解决方案，只有我们必须提供将被禁用的日期并显示可用日期的颜色。它对我有用

   <style>
    .availabledate a {
         background-color: #07ea69 !important;
         background-image :none !important;
         color: #ffffff !important;
     }
     </style>

对于脚本使用此：

<script>

    $(function() {
        //This array containes all the disabled array
          datesToBeDisabled = ["2019-03-25", "2019-03-28"];

            $("#datepicker").datepicker({
              changeMonth: true,
              changeYear: true,
              minDate : 0,
              todayHighlight: 1,
              beforeShowDay: function (date) {
                var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                if(dateStr){
                  return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
                }else{
                  return [datesToBeDisabled.indexOf(dateStr) == -1,""];
                }

              },

            });


    });

  </script>

希望它可以帮助某人。