使用Bootstrap-datepicker實現日曆，以及使用beforeShowDay給日曆的特殊日期新增樣式

注意：bootstrap-datepicker和bootstrap-datetimepicker是不一樣的

所需引入的檔案有（這是我用bootstrap時配置的，有點多哈）：

    <link rel="stylesheet" type="text/css" href="css/tether.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker3.standalone.min.css">
    <link rel="stylesheet" type="text/css" href="css/ol.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/tether.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ol.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <script src="js/bootstrap-datepicker.zh-CN.min.js"></script>

html程式碼如下：

<div class="form-group form-group-filled" id="event_period">
    <input type="text" class="actual_range inputstyle" id="isTrue" placeholder="請輸入日期：">
</div>

在JavaScript中實現的程式碼如下：
var speciald=new Array();
speciald=["2016/12/5","2016/12/9","2016/11/6"];//此處為新增的特殊日期，也可以都設定為yyyy-mm-dd
$('#event_period').datepicker({
      beforeShowDay:function(date){
                var d=date;
                var curr_date=d.getDate();
                var curr_month=d.getMonth()+1;
                var curr_year=d.getFullYear();
                var formatDate=curr_year+"/"+curr_month+"/"+curr_date;

                //特殊日期的匹配

                if($.inArray(formatDate,speciald)!=-1){
                    return {classes:'specialdays'};
                }
                return;
        }    
});
在css中實現的程式碼：
<style type="text/css">
        .inputstyle{
            background-color: #286090;
            color: white;
            height: 35px;
            opacity: 0.7;
        }
        .specialdays{
            background-image: url("images/bag.png");//特殊日期的背景圖片
        }
</style>

下面的圖片即為特殊日期的背景圖片：

實現效果如圖：