Highlight certain dates on bootstrap-datepicker

问题:

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 dates on JSON and then make them into a Javascript's array, but I don't know how to make the datepicker to fetch the dates and highlight them.

Is there a way with the bootstrap-datepicker to achieve this?

回答1:

here is another example to highlight a range of dates:

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

回答2:

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

Might do the trick, although I am not sure.

回答3:

There is simple way to set multiple dates in bootstrap calendar. There is a property multidate which can be used for the selection. find the working code below.

     $('.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)])

Only one problem there the highlights are removed on click. and it take month as one less. if you want August dates then you have to use 7 not 8.

回答4:

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

<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">