Question

如何使用 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
)

Answer 1

查看文档。

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

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

布尔值 - 表示是否可以选择日期
string - 将应用于日期的css类的名称
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>

Answer 2

我使用

解决了这个问题

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

        }
    });
});

Answer 3

发现投票最多的答案无效。稍微更新了代码以使其正常工作。 $ .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, '', ''];
          }

Answer 4

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

Answer 5

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

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

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

Answer 6

我有一个简单的解决方案，只需要提供将被禁用的日期并为可用日期显示颜色即可。

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

希望它可以帮助某人。

Answer 7

对我有用的是使用内置的 jqueryui 函数 formatDate(); 当涉及到 css 时，我不得不稍微调整它并添加额外的类以便能够突出显示日期。

style.css

#datepicker .event-highlight .ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight 
{
    background-color: darkgreen !important;
    color : white !important;
    border: 1px solid darkgreen !important;
    border-color: darkgreen !important;

}

jquery formatDate()

//different date formats accepted
"mm/dd/yy"
"yy-mm-dd"
"d M, y"
"d MM, y"
"DD, d MM, yy"
"'day' d 'of' MM 'in the year' yy"

//return today's date
$.datepicker.formatDate("yy-mm-dd", $('#datepicker').datepicker("getDate"));
    
//alternatively you can use this syntax
jQuery.datepicker.formatDate('yy-mm-dd', 'getDate');

在日期选择器中突出显示日期

$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
beforeShowDay : function (date){
json.events.forEach(function (jsondate,counter) {

//get jquery date
var jquerydate = $.datepicker.formatDate("yy-mm-dd", date);

//OR alternative syntax
var jquerydate = jQuery.datepicker.formatDate('yy-mm-dd', date);

//get date busy with events
var busyday = jsondate.date;

if (jquerydate === busyday) {
return [true, '.event-highlight', 'tooltip text'];
           
}else{
return [true, '', ''];
}

});
return [true];
},

在jquery UI datepicker中突出显示日期

7 个答案: