在bootstrap-datepicker上突出显示某些日期

Question

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

有没有一种方法与引导日期选择器来实现这一目标？

Answer 1

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

虽然我不确定，但可能会这样做。

Answer 2

这里是另外一个例子，以突出显示日期范围：

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 
    } 
    } 
}); 

Answer 3

我使用淘汰赛绑定和日期选择器属性 “beforeShowDay” 这个问题的解决方案：

function MainFilters() { 
 
    var self = this; 
 
    self.notAppliedDates = ko.observableArray([]); 
 
    self.customDates = ko.observableArray(["14.06.2015", "20.06.2015", "26.06.2015", "10.06.2015", "29.06.2015"]); 
 
} 
 

 
ko.bindingHandlers.multiDatepicker = { 
 
    init: function (element, valueAccessor, allBindings) { 
 
     var customDates = allBindings.get("customDates"); 
 

 
     valueAccessor()(); 
 
     $(element).datepicker(
 
      { 
 
       multidate: true, 
 
       language: "ru", 
 
       orientation: "top", 
 
       beforeShowDay: function (date) { 
 
        var d = ConvertDateTostring(date, "dd.mm.yyyy"); 
 

 
        if ($.inArray(d, customDates()) != -1) { 
 
         return { 
 
          classes: 'activeClass' 
 
         }; 
 
        } 
 
        return; 
 
       } 
 
      } 
 
     ) 
 
     .bind(
 
\t \t \t 'changeDate', 
 
\t \t \t function (e) { 
 
\t \t \t  var res = e.dates; 
 
\t \t \t  var value = []; 
 
\t \t \t  res.sort(function (a, b) { return a - b }); 
 
\t \t \t  for (var i in res) { 
 
\t \t \t   value.push(res[i].asString()); 
 
\t \t \t  } 
 

 
\t \t \t  valueAccessor()(value); 
 
\t \t \t } 
 
\t \t); 
 
    }, 
 
    update: function (element, valueAccessor, allBindings, bindingContext) { 
 

 
    } 
 
}; 
 

 
function ConvertDateTostring(date, format) { 
 
    if (!date) { 
 
     return ""; 
 
    } 
 
    if (format) { 
 
     return dateFormat(date, format); 
 
    } 
 
    return dateFormat(date, "dd.mm.yy"); 
 
}

.activeClass{ 
 
    background: #32cd32; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="text" id="dates" data-bind="customDates: customDates, multiDatepicker: notAppliedDates, value: selectedDatesString">

Answer 4

有一种简单的方法可以在引导程序日历中设置多个日期。 有一个属性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)]) 

只有一个问题突出显示在点​​击上删除。并且需要少于一个月的月份。如果你想要八月日期，那么你必须使用7不是8.