-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
179 lines (157 loc) · 5.78 KB
/
index.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可以标注的日历</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="src/css/date.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<h2>日历</h2>
<div class="date"></div>
<h2>日历2</h2>
<div class="date"></div>
<script src="lib/jquery-1.11.3.js"></script>
<script src="src/js/DateMarker.js"></script>
<script>
$(function(){
$('.date').dateMarker();
});
/*
* 留学日历
* 可以选择年月
* 指定日期传入标签
* initDate 格式为YYYY/M/D （不要在月份和日期前加0）
*/
(function($){
$.fn.dateTags = function(opts){
var defaults = {
'months' : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
'weeks' : ['日','一','二','三','四','五','六'],
// 'title': '2015年托福考试时间',
'initDate': '',
'tags':[]
},
settings = $.extend({},defaults,opts);
//获取标题
function getTitle(text){
return '<h6>'+text+'</h6>';
}
/*
* 初始日期
* 如果指定初始日期，使用指定日期
* 没有指定初始日期，使用第一个标签日期
* 没有指定日期，无标签，使用当前日期
*/
function setInitDate(){
var _date = new Date(),
_year = _date.getFullYear(),
_month = _date.getMonth()+ 1,
_text = '';
if(settings.initDate != ''){
return;
}else if(settings.tags.length){
_text = settings.tags[0].time;
}else{
_text = _year+'/'+_month+'/1';
}
settings.initDate = _text;
}
setInitDate();
//获取月份
function getMonthSelect(arr){
var _html = '<div class="date-month"><select class="date-month-select">';
$.each(arr,function(i,n){
_html += '<option value="'+(i+1)+'">'+n+'</option>';
});
return _html+'</select></div>'
}
//获取星期
function getWeek(arr){
var _html = '<ul class="date-ul">';
$.each(arr,function(i,n){
_html += '<li>'+n+'</li>';
});
return _html;
}
//获取空行
function getEmpty(len){
var _html = '',
i = 0;
for(;i < len;i++){
_html +='<li></li>';
}
return _html;
}
//获取日数
function getDay(year,month){
var _year = year,
_month = month,
_date = _year+'/'+_month+'/1',
_dayLength = new Date(_year,_month,0).getDate(),
_html = getWeek(settings.weeks)+getEmpty(new Date(_date).getDay()),
i = 1;
for(;i < _dayLength+1;i++){
_html +='<li data-date="'+_year+'/'+_month+'/'+i+'">'+i+'</li>';
}
return _html+'</ul>';
}
//切换月份
function changeMonth(target,year){
target.on('change','.date-month-select',function(){
var _month = this.value;
target.find('.date-ul').html(getDay(year,_month));
setTags(target);
});
}
//设置标签
function setTags(target){
$.each(settings.tags,function(){
var _that = this;
var _em = '<em>'+_that.tag+'</em>';
target.find('[data-date="'+_that.time+'"]').append(_em).addClass('active');
});
}
//设置日期
function setDate(target,year,month){
target.html(
getTitle(settings.title)+getMonthSelect(settings.months)+getDay(year,month)
);
setInitMonth(target,month);
setTags(target);
}
//设置初始月份
function setInitMonth(target,month){
var _options = target.find('option');
$.each(_options,function(i,n){
if(month === n.value){
n.selected = 'selected';
}
});
}
//初始化日历
function init(target){
var _date = settings.initDate.split('/'),
_year = _date[0],
_month = _date[1];
changeMonth(target,_year);
setDate(target,_year,_month);
}
return this.each(function(){
init($(this));
});
};
}(window.jQuery));
// $('.date').dateTags({
// 'tags':[
// {'time':'2015/1/3','tag':'考试报名'},
// {'time':'2015/2/1','tag':'申报'},
// {'time':'2015/2/16','tag':'网上缴费'},
// {'time':'2015/3/11','tag':'网上缴费'},
// {'time':'2015/5/26','tag':'网上缴费'},
// {'time':'2015/6/6','tag':'网上缴费'}
// ]
// });
</script>
</body>
</html>