Javascript 突出显示引导日期选择器上的某些日期

我正在使用bootstrap datepicker检查我的网站的销售日期，我想显示或突出显示至少有一次销售的日期。我可以在JSON上传递日期，然后将它们放入Javascript数组，但我不知道如何让日期选择器获取日期并突出显示它们

有没有一种使用引导数据采集器的方法来实现这一点

$('#xxx').datepicker()
  .on('onRender', function(ev){
    if (ev.date.valueOf() == your date){
      return 'highlight';
    }
  });

---

可能会成功，但我不确定。

这里是另一个突出显示日期范围的示例：

var inRange=false;
$('#elementPicker').datepicker({
  beforeShowDay: function(date) {
    dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();

    if (dateFormat == '2014-01-01') {
      inRange = true; //to highlight a range of dates
      return {classes: 'highlight', tooltip: 'Title'};
    }
    if (dateFormat == '2014-01-05') {
      if (inRange) inRange = false;  //to stop the highlight of dates ranges
      return {classes: 'highlight', tooltip: 'Title'};
    }
    if (inRange) {
      return {classes: 'highlight-range'}; //create a custom class in css with back color you want
    }
  }
});

---

我使用敲除绑定和datepicker属性“beforeShowDay”解决此问题的方法：

函数MainFilters（）{
var self=这个；
self.notAppliedDates=ko.observearray（[]）；
self.customDates=ko.observearray（[“14.06.2015”、“20.06.2015”、“26.06.2015”、“10.06.2015”、“29.06.2015”）；
}
ko.bindingHandlers.multiDatepicker={
init：函数（元素、valueAccessor、allBindings）{
var customDates=allBindings.get（“customDates”）；
valueAccessor（）；
$（元素）.日期选择器(
{
多日期：对，
语言：“ru”，
方向：“顶部”，
beforeShowDay:功能（日期）{
var d=转换日期字符串（日期，“dd.mm.yyyy”）；
如果（$.inArray（d，customDates（））！=-1）{
返回{
类：“activeClass”
};
}
返回；
}
}
)
.绑定(
“更改日期”，
职能（e）{
var res=e.日期；
var值=[]；
res.sort（函数（a，b）{返回a-b}）；
for（在res中的var i）{
value.push（res[i].asString（））；
}
valueAccessor（）（值）；
}
);
},
更新：函数（元素、valueAccessor、allBindings、bindingContext）{
}
};
函数ConvertDateTostring（日期，格式）{
如果（！日期）{
返回“”；
}
如果（格式）{
返回日期格式（日期、格式）；
}
返回日期格式（日期，年月日）；
}

.activeClass{
背景#32cd32；
}

---

有一种简单的方法可以在引导日历中设置多个日期。 有一个属性multidate可用于选择。 找到下面的工作代码

     $('.inline_date').datepicker({
        multidate: true,
        todayHighlight: true,
        minDate: 0,
    });

 $('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])

---

只有一个问题是，单击会删除高光。而且要少花一个月的时间。如果您想要8月份的日期，则必须使用7而不是8。

使用datetimepicker事件显示，更新和更改需要突出显示日期

这篇博客文章解释了如何使用Bootstrap Datetimepicker实现

$('#datetimepicker').on('dp.show', function(e){
  highlight()
})
$('#datetimepicker').on('dp.update', function(e){
 highlight()
})
$('#datetimepicker').on('dp.change', function(e){
    highlight()
})

function highlight(){
 var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
 var array = $("#datetimepicker").find(".day").toArray();
 for(var i=0;i -1) {
       array[i].style.color="#090";
       array[i].style.fontWeight = "bold";
    } 
 }
 }

有关更多信息，请参阅博客

参考：

---

是的，它会成功的。但是，我认为作者需要突出显示天数数组，而不是一天。没有这样的方法；）@dexxtr在展示日前使用

hook。我更喜欢使用
onRender
，但它不起作用。我只是测试它，而事件从未被调用。改用选项
beforeShowDay
。