年月旬日历控件

在网上看到了一个 年月旬的日历控件，自己就写了一个，截图如下：

1、html 模板

<div class="main-form-kalendar" id="main-form-kalendar" ><div class="kalendar"><ul class=" year"><li ><a id="main_year"></a></li></ul><div class="months"><ul class=" "><li class=" "><a id="main_month_1"></a></li><li class=""><a id="main_month_2"></a></li><li class=""><a id="main_month_3"></a></li></ul></div><ul class=" xun"><li><a title="上旬" id="main_xun_1" >上旬</a></li><li><a title="中旬" id="main_xun_2">中旬</a></li><li><a  title="下旬" id="main_xun_3" >下旬</a></li></ul></div></div>

2、js 代码

// input 框的 onclick 事件来调用 getKanlendar 函数

function getKanlendar(obj , e){
if(obj){

e = e || window.event;
var srcElement = e.srcElement || e.target;
var main1 = document.getElementById("main-form-kalendar");
if(main1){

{
var main_year = document.getElementById('main_year');
var main_month_1 = document.getElementById('main_month_1');
var main_month_2 = document.getElementById('main_month_2');
var main_month_3 = document.getElementById('main_month_3');

var dd = new Date();
var y = dd.getFullYear();
var m = dd.getMonth() + 1;// 获取当前月份的日期
main_year.innerHTML = y;
main_month_1.innerHTML = m + '月';
main_month_2.innerHTML = m + 1+ '月';
main_month_3.innerHTML = m + 2 + '月';

var main_a = main1.getElementsByTagName("a");
var len = main_a.length;
for(var i = 0 ; i < len; i++){
if(main_a[i].id && main_a[i].id.indexOf('main_') == 0){
main_a[i].onclick = function(e3){
var child_ = this.parentNode.parentNode.childNodes;
var len1 = child_.length;
for(var i = 0 ; i < len1 ; i++){
var cla = child_[i].className;
if(cla.indexOf('active') > -1){
cla = cla.replace('active' , '');
child_[i].className = cla;
}
}
this.parentNode.className = 'active';

var countActive = 0;
var text = '';
var li_ = main1.getElementsByTagName("li");
var len2 = li_.length;
for(var i = 0; i < len2; i++){
var li = li_[i];
if(li.className && li.className.indexOf('active') > -1){
countActive++;
var a2 = li.childNodes[0];
if(a2 && a2.id && a2.id.indexOf('main_') > -1){
text += a2.innerHTML + (a2.id == 'main_year'?'年':'');
}
}
}
if(countActive >= 3 && text != null && text != ''){
obj.value = text;
main1.style.display = 'none';
}
}
}
}
}

{
var main1_ = main1;
main1_.style.display = 'block';

var t = 0;
var l = 0;
var obj1_ = obj;
while (obj1_) {
t += obj1_.offsetTop;
l += obj1_.offsetLeft;
obj1_ = obj1_.offsetParent;
}

var top = t;
var left = l;

var bodywidth = document.body.offsetWidth;

var chd_ = main1_.firstChild;
var chd_hi = chd_.offsetHeight;

var c = obj.offsetHeight;
var d = obj.offsetWidth;

var height = c;

var wh = window.screen.availHeight + window.scrollY - window.screenY - c;
if((top + chd_hi + c) > wh){
top = top - chd_hi - c;
}

if (chd_.offsetWidth + left > bodywidth) {
left = left - chd_.offsetWidth + d;
}

main1.style.top = top + height + "px";
main1.style.left = left + "px";
}



{
var kanlendarClick = function(e2 , e){
e2 = e2 || window.event;
var srcElement = e2.srcElement || e2.target;


var a = e.srcElement || e.target;

var obj1 = main1;
var count = 0;
var elm = srcElement;
while(elm){
if(elm == obj1){
count++;
break;
}else{
elm = elm.parentNode;
}
}


if (count == 0 && a != srcElement) {
main1.style.display = 'none';
}
};

if (window.document.addEventListener) {
window.document.addEventListener("click", function(e2){

kanlendarClick(e2 , e);

}, false);
} else {
window.document.attachEvent("onclick", function(e2){

kanlendarClick(e2 , e);
});
}
}
}
}

}

3、css 样式

.main-form-kalendar{ display: none; position: absolute; top: 100px; lefg: -50px; width: 130px; background-color: transparent; z-index: 99; }
.main-form-kalendar .kalendar { width: 130px; border: 1px solid #e9e9e9; background-color: #fff; display: block; color: #333; }
.main-form-kalendar .kalendar ul { width: 100%; }
.main-form-kalendar .kalendar ul li { float: left; }
.main-form-kalendar .kalendar a{ cursor: pointer; }
.main-form-kalendar .kalendar .year { width: 100%; margin: 0 auto; overflow: hidden; }
.main-form-kalendar .kalendar .year li {width: 100% ;}  
.main-form-kalendar .kalendar .year li a { display: block; text-align: center; height: 36px; line-height: 36px; border: 1px solid #eee; }
.main-form-kalendar .kalendar .year li.active a { border: 1px solid #1054ff; color: #1054ff; }
.main-form-kalendar .kalendar .months ul { overflow: hidden; width: 100%; display: block; }
.main-form-kalendar .kalendar .months ul li { float: left; width: 33.33333%;  }
.main-form-kalendar .kalendar .months ul li a { text-align: center; line-height: 36px; border: 1px solid #eee; height: 36px; display: block; }
.main-form-kalendar .kalendar .months ul li.active a { border: 1px solid #1054ff; color: #1054ff }  
.main-form-kalendar .kalendar .xun { overflow: hidden }  
.main-form-kalendar .kalendar .xun li { float: left; width: 33.33333%; }  
.main-form-kalendar .kalendar .xun li a { text-align: center; height: 36px; line-height: 36px; display: block; border: 1px solid #eee;  }  
.main-form-kalendar .kalendar .xun li a p { font-size: 12px; }  
.main-form-kalendar .kalendar .xun li.active a{ border: 1px solid #1054ff; color: #1054ff; }