JQUERY datepicker 将自定义图像添加到特定日期框答案

【问题标题】：JQUERY datepicker add custom images to specific date boxesJQUERY datepicker 将自定义图像添加到特定日期框
【发布时间】：2014-03-21 21:45:37
【问题描述】：

我有一个可以突出显示和禁用特定日期范围的日期选择器实例：

//
$(document).ready(function(){

  $(function(){

      var date1 = new Date;
      date1.setHours(0, 0, 0, 0);
      date1.setDate(10);
      var date2 = new Date;
      date2.setHours(0, 0, 0, 0);
      date2.setDate(23);

     $("#Reservations_stand_alone_calendar").datepicker({
       changeMonth: true,
       showButtonPanel: false,
       showOtherMonths: true,
       //disabled: true,


       beforeShowDay: function(date){
           return [date.getDay() < 4, date >= date1 && date <= date2 ? "dp-highlight" : ""];
       }

      });

   });
});

以上方法可以很好地突出显示和禁用日期范围。

现在，我还想将图像添加到特定的日历日期框视图。我不确定我该怎么做。像什么？：

beforeShowDay: function(date){

     return [date.getDay() < 4, date >= date1 && date <= date2 ? "dp-highlight" : ""];
     // Add image to 21st day??
     if(date ==  21){
       document.getElementById(date).innerHTML += "www.somesitesomewhere.com/Myimage.jpg";??? 
     }

}

我不确定如何访问特定的日期框并在那里添加图像

感谢您的帮助。

【问题讨论】：

标签： javascript jquery css datepicker

【解决方案1】：

您可以执行以下操作来显示图像：

$(function() {
  $( "#datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true
  });
});

您还想引用您希望定位的日期选择器的类/ID。您可能希望为各种日期选择器在背景中显示不同的图像。

【讨论】：

谢谢@iamryandrake :) - 但我希望图像能在日期正确显示。所以第 21 天......日历中的盒子里有数字 21 - 我希望图像显示在那里。
我不知道你可以用这个特定的插件做到这一点，但你总是可以创建一个自定义日历或使用另一个日历库！

【解决方案2】：

这实际上是一件简单的事情。在您的 CSS 中添加新代码：

.dp-highlight-back,
.ui-datepicker .dp-highlight-back span {
  /* INSERT ANY OTHER CSS STYLING HERE USED IN dp-highlight */
  background-image: url("images/calendar.png");
}

对于特定日期，在您的 javascript 中，调用 datepicker 后，添加此代码 sn-p 并添加日期以完全按照下面示例代码中的格式显示背景图像。多个日期的格式为：[11, 21, 2018, ""],[12, 21, 2018, ""]

$("#Reservations_stand_alone_calendar").datepicker({
  beforeShowDay: checkForDate
});

function checkForDate(date) {
  var flagDates = [
    [11, 21, 2018]
  ];
  for (i = 0; i < flagDates.length; i++) {
    if (date.getMonth() == flagDates[i][0] - 1 && date.getDate() == flagDates[i][1] && date.getFullYear() == flagDates[i][2]) {
      return [false, "dp-highlight-back", ""];
    }
  }
  return [true];
}

【讨论】：