Question

我有一个datepicker实例，我可以突出显示和禁用特定日期范围：

//
$(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";??? 
     }

}

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

感谢您的帮助。

Answer 1

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

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

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

Answer 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中，在调用日期选择器之后，添加此代码段并添加日期以完全按照下面的示例代码中的格式显示背景图像。多个日期的格式应为：[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];
}

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

2 个答案: