bootstrap datepick的beforeShowDay方法实现日历 其中有一些特殊日期改变背景颜色

引入文中的各个包和CSS 自行寻找下载
代码如下:


<html>
    <head>
        <meta charset="UTF-8">
        <title>日期title>
        <style type="text/css">
            .inputstyle{
                background-color: #286090;
                color: white;
                height: 35px;
                opacity: 0.7;
            }
            .specialdays{
                /*background-image: url("img/特殊日期背景图片.png");//特殊日期的背景图片*/
                background:  url("img/42_31.png") no-repeat; /*图片位置   不平铺*/
                background-position:top center; /*位置*/
                background-size:42px 31px;      /*大小*/
            }
        style>


        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker3.standalone.min.css">


    head>
    <body>
        <div class="form-group form-group-filled" id="event_period">
             <p style="padding-left:20px; padding-top: 15px;"><span class="glyphicon glyphicon-calendar" id="rili" style="padding-left: 10px;padding-bottom:5px ;">span>p> 
        div>
        <script src="js/jquery-1.8.3.min.js">script>
        <script src="js/bootstrap.min.js">script>
        <script src="js/bootstrap-datepicker.min.js">script>
        <script src="js/locales/bootstrap-datepicker.zh-CN.js">script>
        <script type="text/javascript" >
            var speciald=new Array();
            speciald=["2017/12/12","2017/4/27","2017/4/2","2017/4/8","2017/5/16"];//此处为添加的特殊日期,也可以都设置为yyyy-mm-dd
            $('#rili').datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                //clearBtn: true,//清除按钮
                //todayBtn: true,//今日按钮
                format: "yyyy-mm-dd",//日期格式
                weekStart:0,
                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;
                } 
            });

        script>
    body>
html>

效果图:
bootstrap datepick的beforeShowDay方法实现日历 其中有一些特殊日期改变背景颜色_第1张图片
图片可以自己找 代码都在这里了 搞了我一整天才弄好的。。

你可能感兴趣的:(javascript)