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

Lohman

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

Openair

Answer 2

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

Might do the trick, although I am not sure.

Leavetaking

Yes, it will do the trick. However, I think the author need to highlight an array of days instead of a single day. – Trent

there is no such method ;) bootstrap-datepicker.readthedocs.org/en/latest/events.html#show – Affinitive

@Affinitive Use beforeShowDay hook. bootstrap-datepicker.readthedocs.org/en/latest/… – Leavetaking

I prefer to use onRender, but it doesn't work. I just test it and the event is never called. Use option beforeShowDay instead. – Monotheism

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

Crick

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

Suzisuzie

Answer 5

Using datetimepicker events show, update and change the date need to be highlighted.

The Blog post here explaining how it can achieve using 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";
    } 
 }
 }

For more information see the blog

Reference:

https://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html

Balf

Answer 6

I tried Matias' answer above and had a flew glitches. After a bit of trouble shooting and slightly modifying Matias' answer, I managed to create a working solution.

If you paste the below code into a blank .html file then you should see a input box with a date widget attached to it.

The start date (8th August 2021), end date (26th August 2021) and dates in between should have their own distinct colour scheme.

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js" integrity="sha256-VBLiveTKyUZMEzJd6z2mhfxIqz3ZATCuVMawPZGzIfA=" crossorigin="anonymous"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>






<style>
.StartDate{background-color:  green;}
.InBetweenDates{background-color:  darkred;}
.EndDate{background-color:  blue;}
</style>



   
<p>Date: <input type="text" readonly="" id="elementPicker"></p>
    
<script>

var inRange=false;
$('#elementPicker').datepicker({
   dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        minDate: new Date("01/01/2016"),



  beforeShowDay: function(date){
    console.log("date")
    console.log(date)
    dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();

    console.log("dateFormat")
    console.log(dateFormat)

  // 7 means August (0 means January)
  // We are checking to see if the date is 8th August 2021

  // Matias had  if (dateFormat == '2014-01-01') but after looking at Console.Log,
  // I removed the leading 0 from the day and month figure. 



    if (dateFormat == '2021-7-8') {
      console.log("(dateFormat == '2021-7-8')")
      inRange = true; //to highlight a range of dates
      
      // If the day is 8th August 2021 (remember 7 means August not July) 
      // then we add the CSS class StartDate to the day (look at the top of the code for the StartDate CSS class styling).
      
       return [true, 'StartDate', 'tooltipText'];
    }
  


    if (dateFormat == '2021-7-26') {
        console.log("(dateFormat == '2021-7-26')")
    
      inRange = false;  //to stop the highlight of dates ranges
      
      // If the day is 26th August 2021 (remember 7 means August not July) 
      // then we add the CSS class EndDate to the day (look at the top of the code for EndDate CSS class styling).

       return [true, 'EndDate', 'tooltipText'];
    }


    if (inRange) {
    

      // If the day is between 8th August 2021 - 26th August 2021 then we add the CSS class InBetweenDates to the day (look at the top of the code for the StartDate CSS class styling).
      

      return [true, 'InBetweenDates', 'tooltipText'];
     
  } else {


    // I think this essentially means select the day, do nothing with it and then move on. 
    // Adding this in prevented the error message 'Uncaught TypeError: Cannot read property '0' of undefined jquery datepicker'.
     return [true];
    
    }

  }

});



</script>

Diphyodont

Answer 7

 beforeShowDay: function (date) {

                    dateFormat = (date.getUTCDate()+1).toString().padStart(2, '0') + '-' + (date.getUTCMonth()+1).toString().padStart(2, '0') + '-' + date.getUTCFullYear(); //this will format the dates that appears when you toggle the datpicker to the fromat you want ok..
                    console.log(dateFormat);
                    if ($.inArray(dateFormat, unavailableDates) == -1) { //certain days if they don't exist in my array of dates i already created depending on my project

                    return {classes:'avail_days'}; //this will produce a class called full_days with the date it finds it inside the array (unavailableDates) and you have to style with css THAT avail_days class

                    }else {
                       
                        return [true];
                        
                    }
                
                },

//gratitude appreciated ;)

Tinatinamou