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

一、組件說(shuō)明

datepicker是一種日期選擇組件，類似組件有同框架的datetimepicker，但后者并不支持改變指定日期顯示效果的功能.需實(shí)現(xiàn)對(duì)于指定日期進(jìn)行樣式改變并通過(guò)點(diǎn)擊具體日期實(shí)現(xiàn)后續(xù)數(shù)據(jù)展示。

二、組件環(huán)境需求

1.css和js文件的導(dǎo)入

<!-- 日期控件所用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>

相關(guān)項(xiàng)目文件可通過(guò)文首的GitHub獲取

三、項(xiàng)目代碼

1.核心HTML

創(chuàng)建div{#date}用來(lái)加載datepicker組件，div{#date}用來(lái)對(duì)日歷顏色進(jìn)行標(biāo)注

                <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'  //設(shè)置語(yǔ)言類型為中文，默認(rèn)英文。需導(dǎo)入對(duì)應(yīng)css
    }).prependTo("#date");

    $("#date div.datepicker-days").css({"display":"block"});//覆蓋由于bootstrap-editale.css導(dǎo)致的樣式錯(cuò)誤 (非必須)
    $("#date div.datepicker-inline").css({"width":"initial"});//廢棄原有css中的寬度設(shè)置
    $("#date table.table-condensed").css({"width":"92%","height":"360px"});//調(diào)整日歷大小

    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("進(jìn)行中 ");
    $("#remark").append(shape1,txt1,shape2,txt2,shape3,txt3);  // 追加新元素

(2)改變?nèi)掌跇邮?/h3>

1.獲取日期分組數(shù)據(jù)

    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';//日歷默認(rèn)展示月份
    var sYear =startMonth.split('-')[0];
    var sMonth =startMonth.split('-')[1]-1;//日期選擇器的默認(rèn)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:'進(jìn)行中'};
            }
            if ($.inArray(formatDate, norArr) != -1) {
                return {classes: 'greendays',tooltip:'正常'};
            }
            if ($.inArray(formatDate, errArr) != -1) {
                return {classes: 'reddays',tooltip:'異常'};
            }
            return;
        }
    }).on('changeDate',function(currentDay){
       //改變?nèi)掌谟|發(fā)事件
        }).prependTo("#date");