引入文中的各个包和CSS 自行寻找下载 代码如下：
<!DOCTYPE html> <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>效果图： 图片可以自己找 代码都在这里了 搞了我一整天才弄好的。。
