我的BS3 Datetimepicker正在运行。我想“突出”日历的某些特定日期，如约会。
我的代码现在是这样的：
HTML：
<div id="mini-calendar"></div>
JS：
$('#mini-calendar').datetimepicker({
inline: true,
format: "dd MM yyyy",
});
答案 0 :(得分：0)
因为您没有提到您正在使用的Bootstrap-datetimepicker库，所以我只是在这里发布我为同一任务所做的工作。 你应该添加一些代码来使它工作。
我从这里使用BS datetimepicker https://github.com/smalot/bootstrap-datetimepicker/releases/tag/2.3.11
转到第265行添加以下行：
**//onRender to highlight specific dates!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
this.onRender = options.onRender;//Hung added!!!!!!!!!!!!!!!!!!!!!!!!!
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!**
然后，沿着第683行添加如下行：
//clsName = ''; //Old Hung commented
clsName = this.onRender(prevMonth); //Hung added this line
第821行：
$.fn.datetimepicker.defaults = {
//This function is original empty
//Hung add following:
onRender: function(date) {
return '';
}
//End Hung added
};
在bootstrap v3中go \ bootstrap-datetimepicker-2.3.11 \ sample 文件index.html，添加突出显示的样式：
<style type="text/css">
/*Highlight special holidays*/
.highlight{
background-color: #fdf59a;
color: red !important;
}
</style>
添加以下JavaScript代码：
<script type="text/javascript">
var holidays =
[{"holiday_date":"2016/07/18","holiday_name":"Marine Day","comment":"3rd Monday of July"},
{"holiday_date":"2016/07/25","holiday_name":"Special Day","comment":"My comment"}]
public_holidays = []; //for holding date array only
holiday_messages = []; //for holding meaning of the dates
d = new Date("2016/07/18");
var tmp;
for (var i = 0; i < holidays.length; i ++) {
tmp = holidays[i]["holiday_date"];
tmp = new Date(tmp);
tmp = tmp.valueOf();
public_holidays.push(tmp);
holiday_messages.push(holidays[i]["holiday_name"])
}
$('.form_date').datetimepicker({
language: 'en',
format: 'yyyy/mm/dd',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
onRender: function(date) {
// console.log("date: " + date);
// var d = new Date("2016-07-15");
// !!!!!NOTICE:!!!!!!!!!!!!!!!!!!!!!!!!!
//Must parse the date manually if not it will be wrong when pass to new Date()
var dd = date.getDate();
var mm = date.getMonth()+1; //January is 0!
var yyyy = date.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
date = yyyy+'/'+mm+'/'+dd;
var tooltip_date = yyyy+'/'+mm+'/'+dd;
date = new Date(date);
if ( $.inArray( date.valueOf(), public_holidays ) > -1 ){
console.log("Highlighted date: ");
console.log(date);
return ' highlight';
}
else{
return ' good'; //just return any string
}
}
});
P / S： 奖励点是工具提示。 如果您需要突出显示日期的工具提示。您需要添加两个函数：add_tooltip_to_highlighted_dates和get_tooltip_of_date。 然后将主datetimepicker修改为以下：
function add_tooltip_to_highlighted_dates(){
// Make tooltip of highlighted dates
var highlighted_dates = $(".datetimepicker .highlight");
$.each(highlighted_dates, function(){
var highlighted = $(this).attr("class"); // get all CSS class to parse the highlighted date
console.log("CSS classes: " + highlighted);
var idx = highlighted.indexOf("datetooltip");
var date_str = "";
var css_classes = [];
if( idx > -1){
css_classes = highlighted.split(" ");
for(var j = 0; j < css_classes.length; j++){
var start_idx = css_classes[j].indexOf("datetooltip");
if(start_idx > -1){
start_idx = start_idx+"datetooltip".length+1;
date_str = css_classes[j].substring(start_idx);
break;
}
}
if (date_str != "") {
var tooltip = get_tooltip_of_date(date_str);
console.log(tooltip);
$(this).tooltip({
container: "body",
title: tooltip
});
}else {
console.log("cannot get highlighted date string");
}
}
});
}
function get_tooltip_of_date(date_str){
// date_str = "2016-07-18"
// date_str = date_str.split("-").join("/");
console.log("input date string: " + date_str);
var tooltip = "";
var date = new Date(date_str);
date = date.valueOf();
var index;
for (var i = 0; i < public_holidays.length; i++) {
if (date == public_holidays[i]) {
index = i;
break;
}
}
if(index){
tooltip = holiday_messages[index];
}
return tooltip;
}
$('.form_date').datetimepicker({
language: 'en',
format: 'yyyy/mm/dd',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
onRender: function(date) {
// console.log("date: " + date);
// var d = new Date("2016-07-15");
// !!!!!NOTICE:!!!!!!!!!!!!!!!!!!!!!!!!!
//Must parse the date manually if not it will be wrong when pass to new Date()
var dd = date.getDate();
var mm = date.getMonth()+1; //January is 0!
var yyyy = date.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
date = yyyy+'/'+mm+'/'+dd;
var tooltip_date = yyyy+'/'+mm+'/'+dd;
date = new Date(date);
if ( $.inArray( date.valueOf(), public_holidays ) > -1 ){
console.log("Highlighted date: ");
console.log(date);
console.log(date.valueOf());
return ' highlight datetooltip-'+tooltip_date;
}
else{
return ' good'; //just return any string
}
}
}).on('changeDate', function(ev){
console.log("change dated");
}).on('show', function(ev){
// console.log(ev.date.valueOf());
add_tooltip_to_highlighted_dates();
return '';
}).on("next:month", function(ev) {
console.log("next button click");
add_tooltip_to_highlighted_dates();
}).on("prev:month", function(ev){
console.log("prev button click");
add_tooltip_to_highlighted_dates();
});
希望这有帮助。