首先是调用方法如下
函数
//下面是format格式化显示格式类型，有如下几种：
//yyyy为年数
//大写M为月数
//d为几号
//h为小时
//小写m为分钟
//s为秒数
//q为季度
//小写e，为数字星期格式
//大写E，为中文星期格式
//举例：'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E'
//注意：以上获取时间如果是个位数则返回个位数，比如7月，则返回7，如果需要返回07，参数可以写成这样“MM”，其它同理，由于时分秒功能还没有添加，默认获取当前时分秒
calender('#calend').init({
date : [2015,12,12],//设置默认显示年月日，默认当前年月日
format : 'yyyy-MM-dd',//设置显示格式
button : false //是否显示按钮
left : 0,//追加left，默认0
top :0,//追加top，默认0
onload : function(){ } //初始化完成执行，this为当前创建的日历对象
},function(date){
//回调函数
this.innerHTML = date
});
主要css样式
Box-shadow:0 5px 10px rgba(0,0.2);
border-radius:4px;
position:relative;
font-family:"Microsoft yahei";
position:absolute;
z-index:1000
}
.calender-wrap {
border:1px solid #e2e2e2
}
.calender-wrap:after {
content:'';
display:inline-block;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #eee;
border-top:0;
border-bottom-color:#d7d7d7;
position:absolute;
left:9px;
top:-7px
}
.calender-wrap:before {
content:'';
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #ffffff;
border-top:0;
position:absolute;
left:10px;
top:-6px;
z-index:10
}
.calender-caption {
height:35px;
border-bottom:1px solid #ddd;
z-index:2;
background:#eee
}
.calender-content {
position:relative;
overflow:hidden
}
.calender-content:after {
content:'';
display:block;
clear:both
}
.calender-cell {
cursor:pointer;
float:left;
width:14.28571428%;
height:35px;
text-align:center;
line-height:35px;
font-size:12px;
color:#000;
z-index:1;
border-bottom:1px solid #eee
}
.calender-cell:hover {
background:#eee
}
.calender-caption .calender-cell:hover {
background:none
}
.calender-cell-dark {
cursor:no-drop;
color:#b9b9b9
}
.calender-caption .calender-cell {
height:35px;
line-height:35px;
font-size:13px;
color:#111;
font-weight:bold
}
.calender-header {
text-align:center;
line-height:35px;
text-align:center;
color:#888;
padding-bottom:4px;
margin-bottom:1px;
background:#fff;
position:relative;
border-bottom:1px solid #e6e6e6;
font-size:14px
}
#calender-prev,#calender-next {
text-decoration:none;
display:block;
width:14.2857%;
height:35px;
background:#fff;
position:absolute;
left:0%;
top:0px;
font-family:'宋体';
font-size:14px;
color:#555
}
#calender-prev,#calender-next {
color:#999;
font-size:16px
}
#calender-prev:hover,#calender-next:hover {
background:#eee;
border-radius:5px;
color:#222
}
#calender-next {
left:auto;
right:0%
}
#calender-year,#calender-mon {
cursor:pointer;
padding:2px 4px;
border-radius: 3px;
margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
background:#eee
}
.calender-list {
overflow:hidden
}
.calender-list2,.calender-list3 {
display:none
}
.calender-year-cell,.calender-mon-cell {
width:32.41%;
float:left;
border-radius:4px;
text-align:center;
font-size:12px;
padding:15px 0;
border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
background:#eee;
cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
background:#23acf1;
color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
background:#23acf1;
color:#fff
}
.calender-button {
border-top:1px solid #eee;
width:100%;
margin-top:-1px;
padding:7px 0px 2px 0;
overflow:hidden
}
.calender-button a {
display:block;
text-align:center;
padding:0px 15px;
height: 25px;
line-height: 25px;
float:right;
background:#23acf1;
color:#fff;
margin-right:5px;
cursor:pointer;
margin-left:5px;
font-size:12px;
text-decoration:none
}
.calender-button a:hover {
background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
display:none
}
.calender-wrap.year .calender-list2 {
display:block
}
.calender-wrap.month .calender-list3 {
display:block
}
@keyframes clafade {
0% {
transform:scale(0.95);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}@-webkit-keyframes clafade {
0% {
-webkit-transform:scale(0.95);
opacity:0
}
100% {
-webkit-transform:scale(1);
opacity:1
}
} .calend {
display: block;
width: 180px;
line-height: 28px;
background: #222;
color: #fff;
padding: 5px 12px;
margin:20px 20px 20px 0;
font-size: 14px;
}
效果图一（默认参数）
效果图二（显示按钮，设置时间）
完整实例
<div id="calend" class="calend">选择日期
<div id="calend1" class="calend">选择日期