首先是调用方法如下
//调用方法，后面回调函数返回的是当前选择的日期 calender('#calend').init(function(date){ this.innerHTML = date });
//具体参数说明 //如果需要传入参数，第一个为json，第二个为回调函数 //下面是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样式
.containter { width:320px; margin:auto } .calender-wrap { -webkit-animation:clafade .3s ease; -moz-animation:clafade .3s ease; animation:clafade .3s ease; padding:5px; background:#fff; width:240px; box-shadow:0 5px 10px rgba(0,0,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; }
效果图一（默认参数）
效果图二（显示按钮，设置时间）
完整实例