本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下
效果图：
具体代码：
date *{ margin:0; padding:0;} a{ text-decoration:none; outline:none;} body a{outline:none;blr:expression(this.onFocus=this.blur());} img{ border:none;} ul{ list-style:none;} body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;} .clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;} .clearfix{ zoom:1;} #box{width:350px; position:absolute;} #title{width:350px; height:50px;} #month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #week{ width:350px;height:50px;} #week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;} #con{ width:350px;} #con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;} #con .edate{background:#999;} #con .edate:hover{background:#09F; color:#fff;} #con div.now{background:#09F; color:#fff;} #prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #btns{width:350px; height:40px;} #nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;} #nowtime:hover{background:#ddd;} #cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;} 选择日期：
希望本文所述对大家学习javascript程序设计有所帮助。
