Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 684
Leandro Poblet Avatar asked Mar 19 '14 18:03

Leandro Poblet


People also ask

How do I highlight a specific date in datepicker?

datepicker({ beforeShowDay: function( date ) { var highlight = eventDates[date]; if( highlight ) { return [true, "event", 'Tooltip text']; } else { return [true, '', '']; } } }); The complete JavaScript code to highlight specific dates.

How do I highlight today's date in bootstrap datepicker?

If true or “linked”, displays a “Today” button at the bottom of the datepicker to select the current date. If true, the “Today” button will only move the current date into view; if “linked”, the current date will also be selected.

How can I hide datepicker after selecting date?

Syntax: $(". selector"). datepicker("hide");

How do I change the default date format in bootstrap datepicker?

In order to set the date format, we only need to add format of one argument and then we will add our required format, which is shown in the following example: Example 1: In this example, we are going to use dd-mm-yyyy format.


1 Answers

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
    }
  }
});
like image 135
Matias Avatar answered Sep 18 '22 05:09

Matias