一款精简的JQ日历插件

最终效果如图所示，日历图标可自行修改html，这里未作上传。

 

本人用的jq+angular，最后的值，可以通过   $("#laydateInput").val()   拿到。

html：

 <div class="laydate-box">
                            <input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" ng-model="foundingTime" />
                            <img src="${basePath}/resources/images/personal/calendar.png" alt="" class="icon data-icon"/>
                            <div class="select-date">
                                <div class="select-date-header">
                                    <ul class="heade-ul">
                                        <li class="header-item header-item-one">
                                            <select name="" id="yearList"></select>
                                        </li>
                                        <li class="header-item header-item-two" onselectstart="return false">
                                            <select name="" id="monthList"></select>
                                        </li>
                                        <li class="header-item header-item-three" onselectstart="return false" >
                                            <span class="reback">回到今天</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="select-date-body">
                                    <ul class="week-list">
                                        <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>
                                    </ul>
                                    <ul class="day-tabel"></ul>
                                </div>
                            </div>
                        </div>

 

css：

li{
	list-style: none;
}
.icon{
	position: absolute;
	top: 4px;
	right: 15px;
	height: 25px;
	width: 25px;
	background: #fff;
}
.laydate-box{
	height: 34px;
	width: 154px;
	border: none;
	margin: 100px 0 0 200px;	
	position: relative;
}
#laydateInput{
	outline: none;
	display: block;
	height: 30px;
	width: 150px;
	font-size: 16px;
	line-height: 30px;	
}
.select-date{
	position: absolute;
	left: 0px;
	top:35px;
	width: 266px;
	height: 301px;
	border: 1px solid #58abff;
	display: none;
	background-color: #fff;
	z-index: 1;
}
.select-date-header{
	height: 48px;
	border-bottom: 1px solid #58abff;
}
.heade-ul{
	height: 49px;
}
.header-item{
	height: 28px;
	float: left;
	margin-top: 9px;
}
.header-item select{
	width: 50px;
	height: 28px;
}
.header-item-one select{
	width: 68px;
	margin-left: 10px;
	height: 30px;
	outline: none;
}
.header-item-one{
	height: 30px;
}
.header-item-two i{
	display: block;
	float: left;
	height: 28px;
	width: 28px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
}
.header-item-two i{
	display: block;
	float: