-
Notifications
You must be signed in to change notification settings - Fork 497
/
Calendar5.html
114 lines (111 loc) · 5.14 KB
/
Calendar5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历控件</title>
<style>
body{-webkit-user-select: none;}
#calendar{width: 200px;padding: 5px;background: orange;position: absolute;z-index: 100;}
#calendar h6{font-size: 16px;background: blue;color:#FFF;height: 30px;line-height: 30px;text-align: center; padding: 0;margin: 0;position: relative;cursor: pointer;}
#calendar h6 span{width: 35px;height: 30px;position: absolute;top:0;}
#calendar h6 span.prev{left: 0;background: #000000;}
#calendar h6 span.next{right: 0;background: #000000;}
#calendar ul{padding: 0;margin: 0;list-style: none;overflow: hidden;}
#calendar ul li{float: left;width: 26px;height: 26px;background: darkgreen;line-height: 25px;text-align: center;border: 1px solid #CCC;cursor: pointer;color: #FFF;}
</style>
</head>
<body>
<input type="text" value=" " onfocus="creatCalendar(this)" class="j-select-data">
<div style="width: 200px;height: 200px; background: #CCC;"><a href="http://taobao.fm/archives/1461">查看本页实现原理</a></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>没有做点击面板以外的地方，自动关闭选择面板；这个功能在研究事件源的时候；再做（事件委托模式），因为这个比较重要，需要单独的去写；</p>
<br/>
<br/>
<br/>
<br/>
<input type="text" value=" " onfocus="creatCalendar(this)">
</body>
</html>
<script>
function creatCalendar(ele){
var obj=offset(ele);//为了确定日历控件出现的位置；
var x=obj.left;
var y=obj.top+ele.offsetHeight+5;
if(!document.getElementById("calendar")){
var calendar=document.createElement("div");
calendar.id="calendar";
calendar.style.left=x+"px";//确定日历控件出现的位置,需要用到绝对定位，并且z-index要设施；
calendar.style.top=y+"px";
var h6=document.createElement("h6");
var prev=document.createElement("span");
var title=document.createElement("div");
var next=document.createElement("span");
prev.className="prev";
next.className="next";
prev.innerHTML="上";
next.innerHTML="下";
calendar.appendChild(h6);
h6.appendChild(prev);
h6.appendChild(title);
h6.appendChild(next);
document.body.appendChild(calendar);
/* ele.onblur= function () {//如果需要鼠标离开日历界面，或者失去焦点再关闭，用到事件委托；思路参考；http://broszhu.com/works/xiaomiNavigation/index.html
document.body.removeChild(calendar);
calendar=null;
};*/
oUl=document.createElement("ul");
var currentDate=new Date;//当前的日.不让它变；
var currentYear=currentDate.getFullYear();
var currentMonth=currentDate.getMonth();
prev.onclick=function(){active(--currentMonth)};
next.onclick=function(){active(++currentMonth)};
active(currentMonth);
calendar.appendChild(oUl);
}
function active(m){
oUl.innerHTML="";
var activeDate=new Date(currentYear,m);//活动的日期,这个是不断变的；
activeDate.setDate(1);//活动显示日期的日设置为1号；
var diff=1-activeDate.getDay();//获取1号前面还有几个LI用来漏出上一个月的日期；
var month=activeDate.getMonth();
title.innerHTML=activeDate.getFullYear()+"年"+(month+1)+"月";
activeDate.setDate(diff);//算出日历的起始日期；确定后再循环出后面的日期就可以了；算出这个月要往前退几步；
for(var i=0;i<42;i++){
var oLi=document.createElement("li"),
date=activeDate.getDate();
oLi.innerHTML=date;//表示当前的这个LI是几号；
oLi.dateValue=activeDate.getFullYear()+"-"+(activeDate.getMonth()+1)+"-"+date;
oLi.onclick= function () {
ele.value=this.dateValue;
document.body.removeChild(calendar);
calendar=null;
};
oUl.appendChild(oLi);
if(activeDate.getMonth()!=month){
oLi.style.color="#CCC"
}
activeDate.setDate(date+1);//让日期对象往后走一天；然后再下一次循环的时候，赋值给oLi.innerHTML
}
}
function offset(ele){//计算任意DOM元素距离文档的左或上的绝对偏移
var l=ele.offsetLeft;
var t=ele.offsetTop;
var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MISE 8")>-1){//判断IE8的方法
l+= p.offsetLeft;
t+= p.offsetTop;
}else{
l+= p.offsetLeft+ p.clientLeft;
t+= p.offsetTop+ p.clientTop;
}
p= p.offsetParent;
}
return {left:l,top:t}
}
}
</script>