在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.