Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit db020d4

Browse files
author
jikeytang
committed
update
1 parent ebda359 commit db020d4

File tree

1 file changed

+110
-38
lines changed

1 file changed

+110
-38
lines changed

‎d/03/index.html‎

Lines changed: 110 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,21 @@
3838
<script>
3939
(function(){
4040
var dog = {
41-
$ : function(id){
42-
return document.querySelector('#' + id);
41+
$ : function(selector){
42+
return document.querySelector(selector);
4343
},
4444
on: function(el, type, handler){
4545
el.addEventListener(type, handler, false);
4646
},
4747
off: function(el, type, handler){
48-
el.removeEventListener(type, handler, false);
48+
el.removeEventListener(type, handler);
4949
},
5050
position : function(obj, attr){
5151
if(obj){
5252
var method = obj.getBoundingClientRect();
5353
return attr ? method[attr] : method;
5454
} else {
55-
alert('对象不存在！');
55+
console.log('对象不存在！');
5656
}
5757
},
5858
cache : {},
@@ -74,25 +74,40 @@
7474
}
7575
}
7676
function Calendar(){
77-
var args = arguments[0];
77+
var args = arguments[0],
78+
dom = args.dom;
7879

79-
for(var i in args){
80-
this[i] = args[i];
80+
for(var key in args){
81+
if(key == 'dom'){
82+
this.getDom(dom);
83+
} else {
84+
this[key] = args[key];
85+
}
8186
}
8287
this.init();
8388
}
8489
Calendar.prototype = {
8590
init : function(){
86-
this.getDom();
8791
this.render();
88-
this.hide();
89-
},
90-
getDom : function(){
91-
this.container = dog.$(this.id);
92-
this.input = dog.$(this.input);
92+
this.setDom();
93+
this.setHide();
94+
// this.bindNext();
9395
},
9496
bind : function(){
9597

98+
},
99+
_dom : {
100+
prev : '.prev',
101+
next : '.next',
102+
switch : '.switch'
103+
},
104+
setDom : function(){
105+
this.getDom(this._dom);
106+
},
107+
getDom : function(dom){
108+
for(var prop in dom){
109+
this[prop] = dog.$(dom[prop]);
110+
}
96111
},
97112
render : function(){
98113
var that = this,
@@ -102,13 +117,16 @@
102117
el = null,
103118
html = dog.tpl(this.tpl[0], data);
104119

120+
this.time = this.getFullTime();
121+
105122
if(el = document.getElementById('my-calendar')){
106123
el.style.display = 'block';
107124
this.calendar = el;
108125
} else {
109126
createCalendar();
110127
that.fillWeek();
111128
that.fill();
129+
that.fillYear();
112130
}
113131
function createCalendar(){
114132
div.innerHTML = that.tpl[0];
@@ -118,7 +136,7 @@
118136
div.style.left = pos.left + 'px';
119137
div.children[0].style.display = 'block';
120138
that.container.appendChild(div);
121-
that.calendar = div;
139+
that.calendar = div;
122140
}
123141
},
124142
fillWeek : function(){
@@ -132,16 +150,12 @@
132150
html += '</tr>';
133151
this.calendar.querySelector('.datetimepicker-days thead').innerHTML += html;
134152
},
135-
fill : function(){
136-
var html = '',
137-
calendar = this.calendar,
153+
fill : function(now){
154+
var calendar = this.calendar,
138155
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),
156+
time = now || this.time,
157+
date = this.getDaysInMonth(time.year, time.month),
158+
html = '',
145159
n = 1,
146160
tr = null,
147161
td = null;
@@ -151,41 +165,99 @@
151165
for(var j = 0; j < 7; j++){
152166
td = tr.insertCell(j);
153167
if(n <= date){
154-
td.innerHTML = day-- > 0 ? '' : (td.className = 'day', n++);
168+
td.innerHTML = time.week-- > 0 ? '' : (td.className = 'day', n++);
155169
}
156-
if(td.innerHTML == today){
170+
if(td.innerHTML == time.day){
157171
td.className += ' active';
158172
}
159173
}
160174
}
161175

162176
tBody.appendChild(tr);
163177
},
178+
fillYear : function(){
179+
var el = this.calendar.querySelector('.switch'),
180+
time = this.time;
181+
el.innerHTML = time.year + '年' + time.month + '月';
182+
},
183+
getFullTime : function(){
184+
var time = new Date(2016,3,1),
185+
year = time.getFullYear(),
186+
week = time.getDay(),
187+
day = time.getDate(),
188+
month = time.getMonth();
189+
190+
return {
191+
year : year,
192+
week : week,
193+
day : day,
194+
month : month + 1
195+
}
196+
},
197+
/**
198+
* 得到一个月多少天
199+
* @param {[type]} year [description]
200+
* @param {[type]} month [description]
201+
* @return {[type]} [description]
202+
*/
164203
getDaysInMonth : function(year, month){
165204
return new Date(year, parseInt(month), 0).getDate();
166205
},
167-
hide : function(){
168-
var that = this;
206+
/**
207+
* 点击其它地方隐藏
208+
* @return {[type]} [description]
209+
*/
210+
setHide : function(){
211+
var that = this,
212+
target,
213+
nextEvent = that.nextHandle(that);
214+
169215
dog.on(document, 'click', function(e){
170-
that.calendar.style.display = 'none';
216+
that.hide();
217+
dog.off(that.next, 'click', nextEvent);
171218
});
219+
172220
dog.on(this.calendar, 'click', function(e){
173-
if(e.target.className.indexOf('day') != -1){
174-
that.calendar.style.display = 'none';
221+
target = e.target;
222+
223+
if(target.className.indexOf('day') != -1){
224+
that.hide();
225+
that.setTime.call(that, target.innerHTML);
175226
}
176227
e.stopPropagation();
177228
});
229+
230+
dog.on(that.next, 'click', nextEvent);
231+
},
232+
setTime : function(val){
233+
var time = this.time;
234+
this.input.value = time.year + '-' + time.month + '-' + val;
235+
},
236+
hide : function(){
237+
this.calendar.style.display = 'none';
238+
},
239+
bindNext : function(){
240+
var that = this;
241+
dog.on(this.next, 'click', that.nextHandle(this));
242+
},
243+
nextHandle : function(self){
244+
var that = this;
245+
return function(){
246+
console.log(self);
247+
}
178248
}
179249
}
180250
var defaults = {
181-
id : 'calendar',
182-
input : 'input',
251+
dom : {
252+
container : '#calendar',
253+
input : '#input'
254+
},
183255
zh : {
184-
days : ['日','一','二','三','四','五','六'],
185-
months : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
186-
monthsShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一','十二'],
187-
today : '今天',
188-
clear : '清空'
256+
days : ['日','一','二','三','四','五','六'],
257+
months : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
258+
monthsShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一','十二'],
259+
today : '今天',
260+
clear : '清空'
189261
},
190262
tpl :
191263
[
@@ -195,7 +267,7 @@
195267
'<thead>' +
196268
'<tr>' +
197269
'<th class="prev"><i class="icon-arrow-left"></i></th>' +
198-
'<th colspan="5" class="switch">12123123</th>' +
270+
'<th colspan="5" class="switch"></th>' +
199271
'<th class="next"><i class="icon-arrow-right"></i></th>' +
200272
'</tr>' +
201273
'</thead>' +

0 commit comments

Comments
 (0)