在 Bootstrap 日期时间选择器中突出显示日期

Question

我的 BS3 Datetimepicker 正在运行。我想“突出显示”日历中的某些特定日期，例如约会。

我的代码现在是这样的：

HTML：

 <div id="mini-calendar"></div>

JS：

$('#mini-calendar').datetimepicker({
            inline: true,
            format: "dd MM yyyy",                    
 });

Answer 1

因为你没有提到你正在使用哪个 Bootstrap-datetimepicker 库，所以我只是在这里发布我为同一任务所做的工作。 你应该添加一些代码来使它工作。

我从这里使用 BS datetimepicker https://github.com/smalot/bootstrap-datetimepicker/releases/tag/2.3.11

1. 修改\bootstrap-datetimepicker-2.3.11\js\bootstrap-datetimepicker.js

转到第 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
  };

1. 使用

去 \bootstrap-datetimepicker-2.3.11\sample in bootstrap v3\ 文件 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。 然后修改主日期时间选择器如下：

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

希望这会有所帮助。