GitHub：https://github.com/eternicode/bootstrap-datepicker
官方API: https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
中文翻译:https://www.cnblogs.com/tincyho/p/7978483.html

一、组件说明

datepicker是一种日期选择组件，类似组件有同框架的datetimepicker，但后者并不支持改变指定日期显示效果的功能.需实现对于指定日期进行样式改变并通过点击具体日期实现后续数据展示。

二、组件环境需求

1.css和js文件的导入

<!-- 日期控件所用css -->
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/datepicker/bootstrap-datepicker3.css" rel="stylesheet">
<style type="text/css">
.bluedays {
    /*            //特殊日期的背景颜色*/
        color: #ffffff;
        background-color: #00BFFF
    }
.greendays {
    /*            //特殊日期的背景颜色*/
    color: #ffffff;
    background-color: #7FFF00
}
.orangedays {
    /*            //特殊日期的背景颜色*/
    color: #ffffff;
    background-color: #FFA500
}
.reddays {
   /*            //特殊日期的背景颜色*/
    color: #ffffff;
    background-color: #FF0000
}
</style>

<!-- 使用日期控件的js -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script src="/static/js/datepicker/bootstrap-datepicker.js"></script>
<script src="/static/js/datepicker/locale/bootstrap-datepicker.zh-CN.js"></script>

相关项目文件可通过文首的GitHub获取

三、项目代码

1.核心HTML

创建div{#date}用来加载datepicker组件，div{#date}用来对日历颜色进行标注

                <div class="col-lg-4 col-md-4">
                    <div class="ibox-content center-block" >
                        <div id="date"  style="padding-left: 8%;"></div>
                    </div>
                    <div class="ibox-content center-block" >
                        <div id="remark"  style="border-width: 0px 0;height:20px;"></div>
                    </div>
                </div>

2.核心JS

(1)组件初始化

    $("<div></div>").datepicker({
        language: 'zh-CN'  //设置语言类型为中文，默认英文。需导入对应css
    }).prependTo("#date");

    $("#date div.datepicker-days").css({"display":"block"});//覆盖由于bootstrap-editale.css导致的样式错误 (非必须)
    $("#date div.datepicker-inline").css({"width":"initial"});//废弃原有css中的宽度设置
    $("#date table.table-condensed").css({"width":"92%","height":"360px"});//调整日历大小

    var shape1=$("<div style=\"margin-left:20%;margin-right: 10px;width:20px;height:20px;background:#7FFF00;border-radius:3px;float:left;border:solid rgb(100,100,100) 1px;;\"></div>");
    var txt1=$("<b style=\"margin-right: 10px;float:left;\"></b>").text("正常 ");
    var shape2=$("<div style=\"margin-right: 10px;width:20px;height:20px;background:#FF0000;border-radius:3px;float:left;border:solid rgb(100,100,100) 1px;;\"></div>");
    var txt2=$("<b style=\"margin-right: 10px;float:left;\"></b>").text("异常 ");
    var shape3=$("<div style=\"margin-right: 10px;width:20px;height:20px;background:#00BFFF;border-radius:3px;float:left;border:solid rgb(100,100,100) 1px;;\"></div>");
    var txt3=$("<b style=\"margin-right: 10px;float:left;\"></b>").text("进行中 ");
    $("#remark").append(shape1,txt1,shape2,txt2,shape3,txt3);  // 追加新元素

(2)改变日期样式

1.获取日期分组数据

    var norArr =[new Date( '2019-6-04' ),new Date( '2019-6-05' )];
    var ingArr =[new Date( '2019-6-14' )];
    var errArr =[new Date( '2019-6-16' )];

2.重载组件增加事件

    if($('#date').datepicker){
       $('#date').empty();   //销毁旧datepicker
    }
    var startMonth ='2019-6';//日历默认展示月份
    var sYear =startMonth.split('-')[0];
    var sMonth =startMonth.split('-')[1]-1;//日期选择器的默认Month从0开始

    $("<div style=\"width:100%;\"></div>").datepicker({
        defaultViewDate: { year: sYear, month: sMonth, day: 1 },
        language: 'zh-CN',
        beforeShowDay: function (date) {
            var formatDate = formatDateDay(date);
            //特殊日期的匹配
            if ($.inArray(formatDate, ingArr) != -1) {
                return {classes: 'bluedays',tooltip:'进行中'};
            }
            if ($.inArray(formatDate, norArr) != -1) {
                return {classes: 'greendays',tooltip:'正常'};
            }
            if ($.inArray(formatDate, errArr) != -1) {
                return {classes: 'reddays',tooltip:'异常'};
            }
            return;
        }
    }).on('changeDate',function(currentDay){
       //改变日期触发事件
        }).prependTo("#date");