Highlight certain dates on bootstrap-datepicker

Question

I\'m using the bootstrap-datepicker to check the days where my website got sales and I want to display or highlight the dates there was at least one sale. I can pass the dat

Answer 1

My solution of this problem using Knockout bindings and datepicker property "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(
			'changeDate',
			function (e) {
			    var res = e.dates;
			    var value = [];
			    res.sort(function (a, b) { return a - b });
			    for (var i in res) {
			        value.push(res[i].asString());
			    }

			    valueAccessor()(value);
			}
		);
    },
    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; 
  }