Skip to content

Commit ebda359

Browse files
author
jikeytang
committed
update
1 parent d4848ea commit ebda359

File tree

1 file changed

+166
-13
lines changed

1 file changed

+166
-13
lines changed

‎d/03/index.html

Lines changed: 166 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,32 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>全日历-豪情</title>
6+
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" media="all"/>
7+
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css" media="all"/>
8+
<link rel="stylesheet" href="../../src/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="css/datetimepicker.css" media="all"/>
610
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
711
<style type="text/css">
812
*{ margin:0; padding:0; }
913
body{ font:12px/1.125 Microsoft YaHei; background:#fff; }
1014
ul, li{ list-style:none; }
1115
a{ text-decoration:none; }
12-
.wrap{ width:300px; height:350px; text-align:center; margin:150px auto;}
16+
.wrap{ height:350px; text-align:center; margin:150px auto;}
1317
.inner{ padding:15px; }
18+
.cale-wrap{padding:20px;}
1419
.clearfix{ overflow:hidden; _zoom:1; }
20+
.calendar{width:400px;padding:20px;margin:0 auto;border:1px solid #ccc;}
21+
.my-date{position:absolute;}
22+
.none{display:none;}
1523
</style>
1624
</head>
1725
<body>
26+
<i class="icon-caret-down"></i>
1827
<div class="wrap">
19-
<div id="slider">
20-
<div class="drag_bg"></div>
21-
<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
22-
<div class="handler handler_bg"></div>
28+
<div class="cale-wrap">
29+
<div id="calendar" class="calendar">
30+
<input size="16" type="text" id="input" value="2012-06-15 14:45" readonly="" class="form-control">
31+
</div>
2332
</div>
2433
</div>
2534
<div style="display:none;">
@@ -30,17 +39,43 @@
3039
(function(){
3140
var dog = {
3241
$ : function(id){
33-
return document.querySelector(id);
42+
return document.querySelector('#' + id);
3443
},
3544
on: function(el, type, handler){
3645
el.addEventListener(type, handler, false);
3746
},
3847
off: function(el, type, handler){
3948
el.removeEventListener(type, handler, false);
49+
},
50+
position : function(obj, attr){
51+
if(obj){
52+
var method = obj.getBoundingClientRect();
53+
return attr ? method[attr] : method;
54+
} else {
55+
alert('对象不存在！');
56+
}
57+
},
58+
cache : {},
59+
tpl : function(str, data){
60+
var fn= !/\s/.test(str) ?
61+
this.cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
62+
new Function("obj","var p='';p+='"
63+
+str.replace(/[\r\n\t]/g," ")
64+
.split('\\').join("\\\\")
65+
.split("<%").join("\t")
66+
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
67+
.replace(/\t=(.*?)%>/g, "'+$1+'")
68+
.split("\t").join("';")
69+
.split("%>").join("p+='")
70+
.split("\r").join("\\'")
71+
+"';return p;");
72+
73+
return data? fn.call(data):fn;
4074
}
4175
}
4276
function Calendar(){
43-
var args = arguments[0];
77+
var args = arguments[0];
78+
4479
for(var i in args){
4580
this[i] = args[i];
4681
}
@@ -49,19 +84,137 @@
4984
Calendar.prototype = {
5085
init : function(){
5186
this.getDom();
52-
this.dragBar(this.handler);
87+
this.render();
88+
this.hide();
5389
},
5490
getDom : function(){
55-
var dom = [''];
56-
for(var i in dom){
57-
this[i] = dom[i];
91+
this.container = dog.$(this.id);
92+
this.input = dog.$(this.input);
93+
},
94+
bind : function(){
95+
96+
},
97+
render : function(){
98+
var that = this,
99+
pos = dog.position(this.input),
100+
data = this.zh,
101+
div = document.createElement('div'),
102+
el = null,
103+
html = dog.tpl(this.tpl[0], data);
104+
105+
if(el = document.getElementById('my-calendar')){
106+
el.style.display = 'block';
107+
this.calendar = el;
108+
} else {
109+
createCalendar();
110+
that.fillWeek();
111+
that.fill();
112+
}
113+
function createCalendar(){
114+
div.innerHTML = that.tpl[0];
115+
div.className = 'my-date';
116+
div.id = 'my-calendar';
117+
div.style.top = pos.top + 32 + 'px';
118+
div.style.left = pos.left + 'px';
119+
div.children[0].style.display = 'block';
120+
that.container.appendChild(div);
121+
that.calendar = div;
122+
}
123+
},
124+
fillWeek : function(){
125+
var html = '<tr>',
126+
n = 0,
127+
days = this.zh.days;
128+
129+
while(n < days.length){
130+
html += '<th class="dow">' + days[n++] + '</th>';
131+
}
132+
html += '</tr>';
133+
this.calendar.querySelector('.datetimepicker-days thead').innerHTML += html;
134+
},
135+
fill : function(){
136+
var html = '',
137+
calendar = this.calendar,
138+
tBody = calendar.querySelector('tbody'),
139+
time = new Date(2016,3,1),
140+
year = time.getFullYear(),
141+
day = time.getDay(),
142+
today = time.getDate(),
143+
month = time.getMonth(),
144+
date = this.getDaysInMonth(year, month+1),
145+
n = 1,
146+
tr = null,
147+
td = null;
148+
149+
for(var i = 0; i < 6; i++){
150+
tr = tBody.insertRow(i);
151+
for(var j = 0; j < 7; j++){
152+
td = tr.insertCell(j);
153+
if(n <= date){
154+
td.innerHTML = day-- > 0 ? '' : (td.className = 'day', n++);
155+
}
156+
if(td.innerHTML == today){
157+
td.className += ' active';
158+
}
159+
}
58160
}
161+
162+
tBody.appendChild(tr);
163+
},
164+
getDaysInMonth : function(year, month){
165+
return new Date(year, parseInt(month), 0).getDate();
166+
},
167+
hide : function(){
168+
var that = this;
169+
dog.on(document, 'click', function(e){
170+
that.calendar.style.display = 'none';
171+
});
172+
dog.on(this.calendar, 'click', function(e){
173+
if(e.target.className.indexOf('day') != -1){
174+
that.calendar.style.display = 'none';
175+
}
176+
e.stopPropagation();
177+
});
59178
}
60179
}
61180
var defaults = {
62-
id : 'calendar'
181+
id : 'calendar',
182+
input : 'input',
183+
zh : {
184+
days : ['日','一','二','三','四','五','六'],
185+
months : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
186+
monthsShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一','十二'],
187+
today : '今天',
188+
clear : '清空'
189+
},
190+
tpl :
191+
[
192+
'<div class="datetimepicker datetimepicker-dropdown-bottom-right dropdown-menu">' +
193+
'<div class="datetimepicker-days">' +
194+
'<table class="table-condensed">' +
195+
'<thead>' +
196+
'<tr>' +
197+
'<th class="prev"><i class="icon-arrow-left"></i></th>' +
198+
'<th colspan="5" class="switch">12123123</th>' +
199+
'<th class="next"><i class="icon-arrow-right"></i></th>' +
200+
'</tr>' +
201+
'</thead>' +
202+
'<tbody></tbody>' +
203+
'<tfoot class="none">' +
204+
'<tr><th colspan="7" class="today"></th></tr>' +
205+
'<tr><th colspan="7" class="clear"></th></tr>' +
206+
'</tfoot>' +
207+
'</table>' +
208+
'</div>' +
209+
'</div>',
210+
'1'
211+
]
212+
213+
}
214+
document.getElementById('input').onclick = function(e){
215+
new Calendar(defaults);
216+
e.stopPropagation();
63217
}
64-
new Calendar(defaults);
65218
}());
66219
</script>
67220
</body>

0 commit comments

Comments
 (0)