如何在不使用 beforeShowDay 的情况下突出显示 jquery 日期选择器中的某些日期？

Question

除了使用 beforeShowDay() 之外，还有其他方法可以突出显示内联日期选择器日历中数组中的某些日期吗？ beforeShowDay 对我不起作用。它只会更改今天日期的颜色，不会突出显示任何其他日期。我想要使用 jquery 或 javascript 的替代方案。对于什么是值得的，这里是我的代码

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


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

if (jquerydate === busyday) {

console.log ('event date :' +busyday);//print all dates busy with events works here

return [true, '.event-highlight', 'tooltip text'];//BUT only highlight today's date
           
}else{
return [true, '', ''];
}

});
return [true];
}

Answer 1

我面临的问题与 beforeShowDay 函数如何设置为在显示日历后基本触发有关。它呈现在任何东西之前。因此，如果您将它内嵌在始终显示的位置，您可能运行会遇到像我这样的显示问题。很久以前 jquery 论坛上 here and also here 解决了这个问题。但我确实想 post 对这里的修复进行补充。

html

<div id="calendar_datepicker"></div>//inline not an input

js

function myCalendar() {

//before show day fix for inline calendar
$.extend($.datepicker, {

// Reference the orignal function so we can override it and call it later
_inlineDatepicker2: $.datepicker._inlineDatepicker,

// Override the _inlineDatepicker method
_inlineDatepicker: function (target, inst) {

// Call the original
this._inlineDatepicker2(target, inst);

var beforeShow = $.datepicker._get(inst, 'beforeShow');

if (beforeShow) {
beforeShow.apply(target, [target, inst]);
}
}
});

//calendar
$('#calendar_datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
todayHighlight: true,

beforeShow: function( input, inst ) {

console.log(input);

},

});
}

console.log(input) returns a node containing the date value

console.log(inst) returns an object with month, year and day

对象结果

{
  "id": "calendar_datepicker",
  "input": {
    "0": {},
    "length": 1
  },
  "selectedDay": 14,
  "selectedMonth": 0,
  "selectedYear": 2021,
  "drawMonth": 0,
  "drawYear": 2021,
  "inline": true,
  "dpDiv": {
    "0": {},
    "length": 1
  },
  "settings": {
    "dateFormat": "yy-mm-dd",
    "changeMonth": true,
    "changeYear": true,
    "todayHighlight": true
  },
  "currentDay": 14,
  "currentMonth": 0,
  "currentYear": 2021,
  "yearshtml": null,
  "_keyEvent": false
}

如何在不使用 beforeShowDay 的情况下突出显示 jquery 日期选择器中的某些日期？

How to highlight certain dates in jquery datepicker WITHOUT using beforeShowDay?

jquery

jquery-ui-datepicker