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?
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.
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.
Syntax: $(". selector"). datepicker("hide");
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.
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
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With