I am using bootstrap datepicker.I need to highlight some random dates.
For Example:
I need to highlight the dates like 1,3,8,20,21,16,26,30. Could you please tel
Based on @Hassan Raza answer's I've made this jsfiddle: https://jsfiddle.net/ToniBCN/mzke8tuv/
Set calendar to february 2019 to see some days in orange, others in green and the rest disabled, depending json data.
// In order to call bootstrap's datepicker instead of jquery object
// https://github.com/uxsolutions/bootstrap-datepicker
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality
$.fn.bootstrapDP.defaults.format = "dd/mm/yyyy";
$.fn.bootstrapDP.defaults.startDate = '01/01/2019'
$.fn.bootstrapDP.defaults.beforeShowDay = function(date) {
// in order to get current day from calendar in the same format than json
calendar_dates = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);
let optionByDate = [{
"date": "20190126",
"option": "A"
},
{
"date": "20190128",
"option": "B"
}, {
"date": "20190131",
"option": "A"
}, {
"date": "20190202",
"option": "B"
}, {
"date": "20190205",
"option": "A"
}, {
"date": "20190207",
"option": "B"
}, {
"date": "20190210",
"option": "A"
}, {
"date": "20190212",
"option": "B"
}, {
"date": "20190215",
"option": "A"
}, {
"date": "20190217",
"option": "B"
}, {
"date": "20190220",
"option": "A"
}, {
"date": "20190222",
"option": "B"
}, {
"date": "20190225",
"option": "A"
}, {
"date": "20190227",
"option": "B"
}, {
"date": "20190302",
"option": "A"
}, {
"date": "20190304",
"option": "B"
}
];
// Get data from optionByDate json
function getDataByCalendar(date) {
return optionByDate.filter(
function(optionByDate) {
return optionByDate.date == date
}
);
}
let search_index = getDataByCalendar(calendar_dates);
if (search_index.length > 0) {
if (search_index[0].option == "A") return {
classes: 'highlighted-a',
tooltip: 'A option'
};
if (search_index[0].option == "B") return {
classes: 'highlighted-b',
tooltip: 'B option'
};
} else {
// Disabled day
return {
enabled: false,
tooltip: 'No option'
};
}
};